feat: merge master

docs/.vuepress/utils/vueJson.json

@@ -160,7 +160,7 @@
   "E_App": {
     "example": {
       "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/App.uvue",
-      "code": "```vue\n<script lang=\"uts\">\r\n  import { state, setLifeCycleNum, setAppLaunchPath, setAppShowPath } from './store/index.uts'\r\n\r\n  let firstBackTime = 0\r\n  export default {\r\n    onLaunch: function (options) {\r\n      console.log(options)\r\n      // 自动化测试\r\n      setLifeCycleNum(state.lifeCycleNum + 1000)\r\n      setAppLaunchPath(options.path)\r\n      console.log('App Launch')\r\n      // #ifdef UNI-APP-X && APP-ANDROID\r\n      const performance = uni.getPerformance()\r\n      const observer : PerformanceObserver = performance.createObserver((entryList : PerformanceObserverEntryList) => {\r\n        console.log('observer:entryList.getEntries()')\r\n        console.log(entryList.getEntries())\r\n      })\r\n      observer.observe({\r\n        entryTypes: ['render', 'navigation'],\r\n      } as PerformanceObserverOptions)\r\n      // #endif\r\n    },\r\n    onShow: function (options) {\r\n      // 自动化测试\r\n      setLifeCycleNum(state.lifeCycleNum + 100)\r\n      setAppShowPath(options.path)\r\n      console.log('App Show')\r\n    },\r\n    onHide: function () {\r\n      // 自动化测试\r\n      setLifeCycleNum(state.lifeCycleNum - 100)\r\n      console.log('App Hide')\r\n    },\r\n    // #ifdef APP-ANDROID\r\n    onLastPageBackPress: function () {\r\n      // 自动化测试\r\n      setLifeCycleNum(state.lifeCycleNum - 1000)\r\n      console.log('App LastPageBackPress')\r\n      if (firstBackTime == 0) {\r\n        uni.showToast({\r\n          title: '再按一次退出应用',\r\n          position: 'bottom',\r\n        })\r\n        firstBackTime = Date.now()\r\n        setTimeout(() => {\r\n          firstBackTime = 0\r\n        }, 2000)\r\n      } else if (Date.now() - firstBackTime < 2000) {\r\n        firstBackTime = Date.now()\r\n        uni.exit()\r\n      }\r\n    },\r\n    // #endif\r\n    onExit() {\r\n      console.log('App Exit')\r\n    },\r\n    methods: {\r\n      checkLaunchPath() : boolean {\r\n        const HOME_PATH = 'pages/tab-bar/options-api'\r\n        if (state.appLaunchPath != HOME_PATH) {\r\n          return false\r\n        }\r\n        if (state.appShowPath != HOME_PATH) {\r\n          return false\r\n        }\r\n        return true\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style>\r\n  @import \"./styles/common.css\";\r\n\r\n  .list-item-text {\r\n    line-height: 36px;\r\n  }\r\n\r\n  .split-title {\r\n    margin: 20px 0 5px;\r\n    padding: 5px 0;\r\n    border-bottom: 1px solid #dfdfdf;\r\n  }\r\n\r\n  .btn-view {\r\n    margin: 10px 0;\r\n    padding: 10px;\r\n    border: 1px solid #dfdfdf;\r\n    border-radius: 3px;\r\n  }\r\n</style>\n```",
+      "code": "```vue\n<script lang=\"uts\">\r\n  import { state, setLifeCycleNum, setAppLaunchPath, setAppShowPath } from './store/index.uts'\r\n\r\n  let firstBackTime = 0\r\n  export default {\r\n    onLaunch: function (options) {\r\n      console.log(options)\r\n      // 自动化测试\r\n      setLifeCycleNum(state.lifeCycleNum + 1000)\r\n      setAppLaunchPath(options.path)\r\n      console.log('App Launch')\r\n      // #ifdef UNI-APP-X && APP-ANDROID\r\n      const performance = uni.getPerformance()\r\n      const observer : PerformanceObserver = performance.createObserver((entryList : PerformanceObserverEntryList) => {\r\n        console.log('observer:entryList.getEntries()')\r\n        console.log(entryList.getEntries())\r\n      })\r\n      observer.observe({\r\n        entryTypes: ['render', 'navigation'],\r\n      } as PerformanceObserverOptions)\r\n      // #endif\r\n    },\r\n    onShow: function (options) {\r\n      // 自动化测试\r\n      setLifeCycleNum(state.lifeCycleNum + 100)\r\n      setAppShowPath(options.path)\r\n      console.log('App Show')\r\n    },\r\n    onHide: function () {\r\n      // 自动化测试\r\n      setLifeCycleNum(state.lifeCycleNum - 100)\r\n      console.log('App Hide')\r\n    },\r\n    // #ifdef APP-ANDROID\r\n    onLastPageBackPress: function () {\r\n      // 自动化测试\r\n      setLifeCycleNum(state.lifeCycleNum - 1000)\r\n      console.log('App LastPageBackPress')\r\n      if (firstBackTime == 0) {\r\n        uni.showToast({\r\n          title: '再按一次退出应用',\r\n          position: 'bottom',\r\n        })\r\n        firstBackTime = Date.now()\r\n        setTimeout(() => {\r\n          firstBackTime = 0\r\n        }, 2000)\r\n      } else if (Date.now() - firstBackTime < 2000) {\r\n        firstBackTime = Date.now()\r\n        uni.exit()\r\n      }\r\n    },\r\n    // #endif\r\n    onExit() {\r\n      console.log('App Exit')\r\n    },\r\n    methods: {\r\n      checkLaunchPath() : boolean {\r\n        const HOME_PATH = 'pages/index/index'\r\n        if (state.appLaunchPath != HOME_PATH) {\r\n          return false\r\n        }\r\n        if (state.appShowPath != HOME_PATH) {\r\n          return false\r\n        }\r\n        return true\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style>\r\n@import './styles/common.css';\r\n\r\n.list-item-text {\r\n  line-height: 36px;\r\n}\r\n\r\n.split-title {\r\n  margin: 20px 0 5px;\r\n  padding: 5px 0;\r\n  border-bottom: 1px solid #dfdfdf;\r\n}\r\n\r\n.btn-view {\r\n  margin: 10px 0;\r\n  padding: 10px;\r\n  border: 1px solid #dfdfdf;\r\n  border-radius: 3px;\r\n}\r\n</style>\r\n\n```",
       "webUrl": "https://hellouvue.dcloud.net.cn/#"
     }
   },
@@ -451,7 +451,7 @@
     },
     "props_array-literal-options": {
       "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/props/array-literal-options.uvue",
-      "code": "```vue\n<template>\r\n  <view>\r\n    <text class=\"mb-10 bold\">array literal</text>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>str: </text>\r\n      <text id=\"array-literal-str\">{{ str }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>num: </text>\r\n      <text id=\"array-literal-num\">{{ num }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>bool: </text>\r\n      <text id=\"array-literal-bool\">{{ bool }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>obj: </text>\r\n      <text id=\"array-literal-obj\">{{ JSON.stringify(obj) }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>arr: </text>\r\n      <text id=\"array-literal-arr\">{{ JSON.stringify(arr) }}</text>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n  props: ['str', 'num', 'bool', 'obj', 'arr'],\r\n  mounted() {\r\n    console.log('this.$props is Map', this.$props, this.$props instanceof Map);\r\n    console.log('this.$props.str: ',this.$props['str']);\r\n    console.log('this.$props.num: ',this.$props['num']);\r\n    console.log('this.$props.bool: ',this.$props['bool']);\r\n    console.log('this.$props.arr: ',this.$props['arr']);\r\n    console.log('this.$props.obj: ',this.$props['obj']);\r\n  }\r\n};\r\n</script>\r\n\n```",
+      "code": "```vue\n<template>\r\n  <view>\r\n    <text class=\"mb-10 bold\">array literal</text>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>str: </text>\r\n      <text id=\"array-literal-str\">{{ str }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>num: </text>\r\n      <text id=\"array-literal-num\">{{ num }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>bool: </text>\r\n      <text id=\"array-literal-bool\">{{ bool }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>obj: </text>\r\n      <text id=\"array-literal-obj\">{{ JSON.stringify(obj) }}</text>\r\n    </view>\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>arr: </text>\r\n      <text id=\"array-literal-arr\">{{ JSON.stringify(arr) }}</text>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n  props: ['str', 'num', 'bool', 'obj', 'arr'],\r\n  mounted() {\r\n    console.log('this.$props.str: ',this.$props['str']);\r\n    console.log('this.$props.num: ',this.$props['num']);\r\n    console.log('this.$props.bool: ',this.$props['bool']);\r\n    console.log('this.$props.arr: ',this.$props['arr']);\r\n    console.log('this.$props.obj: ',this.$props['obj']);\r\n  }\r\n};\r\n</script>\r\n\n```",
       "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/component-instance/props/array-literal-options"
     },
     "props_object-type-composition": {
@@ -521,7 +521,7 @@
     },
     "root_child-composition": {
       "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/root/child-composition.uvue",
-      "code": "```vue\n<template>\r\n  <view class=\"flex justify-between flex-row\">\r\n    <text>root str in parent component: </text>\r\n    <text id=\"root-str-child\">{{ rootStr }}</text>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst str = ref('child component str')\r\nconst rootStr = ref('')\r\n\r\nonMounted(() => {\r\n  const instance = getCurrentInstance()!.proxy!\r\n  rootStr.value = (instance.$root!.$exposed['str'] as Ref<string>).value as string\r\n})\r\n</script>\r\n\n```",
+      "code": "```vue\n<template>\r\n  <view class=\"flex justify-between flex-row\">\r\n    <text>root str in parent component: </text>\r\n    <text id=\"root-str-child\">{{ rootStr }}</text>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst str = ref('child component str')\r\nconst rootStr = ref('')\r\n\r\nonMounted(() => {\r\n  const instance = getCurrentInstance()!.proxy!\r\n  // #ifdef APP-ANDROID\r\n  rootStr.value = (instance.$root!.$exposed['str'] as Ref<string>).value as string\r\n  // #endif\r\n  // #ifndef APP-ANDROID\r\n  rootStr.value = instance.$root!['str'] as string\r\n  // #endif\r\n})\r\n</script>\r\n\n```",
       "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/component-instance/root/child-composition"
     },
     "root_child-options": {
@@ -531,7 +531,7 @@
     },
     "root_root-composition": {
       "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/root/root-composition.uvue",
-      "code": "```vue\n\r\n<template>\r\n    <view class=\"page\">\r\n      <view class=\"mb-10 flex justify-between flex-row\">\r\n        <text>root str in parent component: </text>\r\n        <text id=\"root-str-parent\">{{ rootStr }}</text>\r\n      </view>\r\n      <child />\r\n    </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport Child from './child-composition.uvue'\r\n\r\nconst str = ref('root component str')\r\nconst rootStr = ref('')\r\n\r\nonReady(() => {\r\n  const instance = getCurrentInstance()!.proxy!\r\n  rootStr.value = (instance.$root!.$exposed['str'] as Ref<string>).value as string\r\n})\r\n\r\ndefineExpose({\r\n  str\r\n})\r\n</script>\r\n\n```",
+      "code": "```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"mb-10 flex justify-between flex-row\">\r\n      <text>root str in parent component: </text>\r\n      <text id=\"root-str-parent\">{{ rootStr }}</text>\r\n    </view>\r\n    <Child />\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\n  import Child from './child-composition.uvue'\r\n\r\n  const str = ref('root component str')\r\n  const rootStr = ref('')\r\n\r\n  onReady(() => {\r\n    const instance = getCurrentInstance()!.proxy!\n    // TODO: 确认 android 与 ios 的差异， ios 与标准 vue 相同\n    // #ifdef APP-ANDROID\r\n    rootStr.value = (instance.$root!.$exposed['str'] as Ref<string>).value as string\r\n    // #endif\r\n    // #ifndef APP-ANDROID\r\n    rootStr.value = instance.$root!['str'] as string\r\n    // #endif\r\n  })\r\n\r\n  defineExpose({\r\n    str\r\n  })\r\n</script>\n```",
       "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/component-instance/root/root-composition"
     },
     "root_root-options": {
@@ -606,12 +606,12 @@
     },
     "mixins_components_Comp1": {
       "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/Comp1.uvue",
-      "code": "```vue\n<template>\r\n  <view class=\"mt-10\" ref=\"mixin-comp-root\">\r\n    <text class=\"bold\">Comp1: inheritAttrs: false</text>\r\n    <text class=\"mt-10\" style=\"color:#ccc;\"\r\n      >rootElementTitle should be null</text\r\n    >\r\n    <text class=\"mt-10 root-element-title-1\">rootElementTitle: {{ rootElementTitle }}</text>\n    <!-- #ifdef APP -->\r\n    <text class=\"mt-10 bold\">trigger emitter:</text>\r\n    <button class=\"mt-10 global-mixin-emit-1\" @click=\"triggerEmitter('globalMixinEmit1')\">\r\n      trigger globalMixinEmit1\r\n    </button>\r\n    <button\r\n      class=\"mt-10 global-child-mixin-emit-1\"\r\n      @click=\"triggerEmitter('globalChildMixinEmit1')\">\r\n      trigger globalChildMixinEmit1\r\n    </button>\r\n    <button class=\"mt-10 global-mixin-emit-2\" @click=\"triggerEmitter('globalMixinEmit2')\">\r\n      trigger globalMixinEmit2\r\n    </button>\r\n    <button\r\n      class=\"mt-10 global-child-mixin-emit-2\"\r\n      @click=\"triggerEmitter('globalChildMixinEmit2')\">\r\n      trigger globalChildMixinEmit2\r\n    </button>\r\n    <button class=\"mt-10 mixin-emit\" @click=\"triggerEmitter('mixinEmit')\">\r\n      trigger mixinEmit\r\n    </button>\r\n    <button class=\"mt-10 child-mixin-emit\" @click=\"triggerEmitter('childMixinEmit')\">\r\n      trigger childMixinEmit\r\n    </button>\r\n    <MixinComp />\n    <!-- #endif -->\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n  mixins:[{\r\n    mixins: [{\r\n      emits: ['childMixinEmit']\r\n    }],\r\n    inheritAttrs: false,\r\n    emits:['mixinEmit']\r\n  }],\r\n  data(){\r\n    return {\r\n      rootElementTitle: '' as string | null\r\n    }\r\n  },\r\n  mounted(){\r\n    const rootElement = this.$refs['mixin-comp-root'] as UniElement\r\n    this.rootElementTitle = JSON.stringify(rootElement.getAttribute('title'))\r\n  },\r\n  methods: {\r\n    triggerEmitter(emit: string){\r\n      this.$emit(emit, emit)\r\n    },\r\n  }\r\n}\r\n</script>\r\n\n```",
+      "code": "```vue\n<template>\r\n  <view class=\"mt-10\" ref=\"mixin-comp-root\">\r\n    <text class=\"bold\">Comp1: inheritAttrs: false</text>\r\n    <text class=\"mt-10\" style=\"color:#ccc;\"\r\n      >rootElementTitle should be null</text\r\n    >\r\n    <text class=\"mt-10 root-element-title-1\">rootElementTitle: {{ rootElementTitle }}</text>\r\n    <!-- #ifdef APP -->\r\n    <text class=\"mt-10 bold\">trigger emitter:</text>\r\n    <button class=\"mt-10 global-mixin-emit-1\" @click=\"triggerEmitter('globalMixinEmit1')\">\r\n      trigger globalMixinEmit1\r\n    </button>\r\n    <button\r\n      class=\"mt-10 global-child-mixin-emit-1\"\r\n      @click=\"triggerEmitter('globalChildMixinEmit1')\">\r\n      trigger globalChildMixinEmit1\r\n    </button>\r\n    <button class=\"mt-10 global-mixin-emit-2\" @click=\"triggerEmitter('globalMixinEmit2')\">\r\n      trigger globalMixinEmit2\r\n    </button>\r\n    <button\r\n      class=\"mt-10 global-child-mixin-emit-2\"\r\n      @click=\"triggerEmitter('globalChildMixinEmit2')\">\r\n      trigger globalChildMixinEmit2\r\n    </button>\r\n    <button class=\"mt-10 mixin-emit\" @click=\"triggerEmitter('mixinEmit')\">\r\n      trigger mixinEmit\r\n    </button>\r\n    <button class=\"mt-10 child-mixin-emit\" @click=\"triggerEmitter('childMixinEmit')\">\r\n      trigger childMixinEmit\r\n    </button>\r\n    <MixinComp />\r\n    <!-- #endif -->\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n  mixins:[{\r\n    mixins: [{\r\n      emits: ['childMixinEmit']\r\n    }],\r\n    inheritAttrs: false,\r\n    emits:['mixinEmit']\r\n  }],\r\n  data(){\r\n    return {\r\n      rootElementTitle: '' as string | null\r\n    }\r\n  },\r\n  mounted(){\r\n    const rootElement = this.$refs['mixin-comp-root'] as UniElement\r\n    this.rootElementTitle = JSON.stringify(rootElement.getAttribute('title'))\r\n  },\r\n  methods: {\r\n    triggerEmitter(emit: string){\r\n      this.$emit(emit, emit)\r\n    },\r\n  }\r\n}\r\n</script>\r\n\n```",
       "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/Comp1"
     },
     "mixins_components_Comp2": {
       "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/component-instance/mixins/components/Comp2.uvue",
-      "code": "```vue\n<template>\r\n  <view class=\"mt-10\" ref=\"mixin-comp-root\">\r\n    <text class=\"bold\">Comp2: inheritAttrs: true</text>\r\n    <text class=\"mt-10\" style=\"color:#ccc;\">rootElementTitle should not be null</text >\r\n    <text class=\"mt-10 root-element-title-2\"\r\n      >rootElementTitle: {{ rootElementTitle }}</text\r\n    >\r\n    <text class=\"mt-10\">{{ namesakeMixinProp }}</text>\r\n    <text class=\"mt-10\">{{ namesakeMixinDataMsg }}</text>\r\n    <text class=\"mt-10\">{{ namesakeMixinComputed }}</text>\r\n    <text class=\"mt-10 mixin-watch-msg\">{{ mixinWatchMsg }}</text>\r\n    <text class=\"mt-10\">{{ namesakeMixinMethod() }}</text>\r\n    <button class=\"mt-10\" @click=\"changeGlobalMixinOnloadMsg1\">\r\n      change globalMixinOnloadMsg1\r\n    </button>\r\n    <MixinComp />\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport CompForComp from './CompForComp.uvue'\r\n\r\nexport default {\r\n  mixins:[{\r\n    inheritAttrs: true,\r\n  }],\r\n  components: {MixinComp: CompForComp},\r\n  props: {\r\n    namesakeMixinProp: {\r\n      type: String,\r\n      default: '组件内部的同名 props'\r\n    }\r\n  },\r\n  data(){\r\n    return {\r\n      namesakeMixinDataMsg: '组件内部的同名 data',\r\n      mixinWatchMsg: '',\r\n      rootElementTitle: '' as string | null\r\n    }\r\n  },\r\n  computed: {\r\n    namesakeMixinComputed(): string {\r\n      const res = '组件内部的同名 computed'\r\n      console.log(res)\r\n      return res\r\n    }\r\n  },\r\n  mounted(){\r\n    const rootElement = this.$refs['mixin-comp-root'] as UniElement\r\n    this.rootElementTitle = JSON.stringify(rootElement.getAttribute('title'))\r\n  },\r\n  watch: {\r\n    globalMixinOnloadMsg1(newVal: string) {\r\n      this.mixinWatchMsg = `组件内部定义的 watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\r\n      console.log(this.mixinWatchMsg)\r\n    },\r\n  },\r\n  methods: {\r\n    namesakeMixinMethod(): string {\r\n      const res = '组件内部的同名 method'\r\n      console.log(res)\r\n      return res\r\n    },\r\n    changeGlobalMixinOnloadMsg1(){\r\n      this.globalMixinOnloadMsg1 = 'new globalMixinOnloadMsg1 changed in comp2'\r\n    }\r\n  }\r\n}\r\n</script>\r\n\n```",
+      "code": "```vue\n<template>\r\n  <view class=\"mt-10\" ref=\"mixin-comp-root\">\r\n    <text class=\"bold\">Comp2: inheritAttrs: true</text>\r\n    <text class=\"mt-10\" style=\"color:#ccc;\">rootElementTitle should not be null</text >\r\n    <text class=\"mt-10 root-element-title-2\"\r\n      >rootElementTitle: {{ rootElementTitle }}</text\r\n    >\r\n    <text class=\"mt-10\">{{ namesakeMixinProp }}</text>\r\n    <text class=\"mt-10\">{{ namesakeMixinDataMsg }}</text>\r\n    <text class=\"mt-10\">{{ namesakeMixinComputed }}</text>\r\n    <text class=\"mt-10 mixin-watch-msg\">{{ mixinWatchMsg }}</text>\r\n    <text class=\"mt-10\">{{ namesakeMixinMethod() }}</text>\r\n    <button class=\"mt-10\" @click=\"changeGlobalMixinOnloadMsg1\">\r\n      change globalMixinOnloadMsg1\r\n    </button>\r\n    <MixinComp />\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport CompForComp from './CompForComp.uvue'\r\n\r\nexport default {\r\n  mixins:[{\r\n    inheritAttrs: true,\r\n  }],\r\n  components: {MixinComp: CompForComp},\r\n  props: {\r\n    namesakeMixinProp: {\r\n      type: String,\r\n      default: '组件内部的同名 props'\r\n    }\r\n  },\r\n  data(){\r\n    return {\r\n      namesakeMixinDataMsg: '组件内部的同名 data',\r\n      mixinWatchMsg: '',\r\n      rootElementTitle: '' as string | null\r\n    }\r\n  },\r\n  computed: {\r\n    namesakeMixinComputed(): string {\r\n      const res = '组件内部的同名 computed'\r\n      console.log(res)\r\n      return res\r\n    }\r\n  },\r\n  mounted(){\r\n    const rootElement = this.$refs['mixin-comp-root'] as UniElement\r\n    this.rootElementTitle = rootElement.getAttribute('title')\r\n  },\r\n  watch: {\r\n    globalMixinOnloadMsg1(newVal: string) {\r\n      this.mixinWatchMsg = `组件内部定义的 watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`\r\n      console.log(this.mixinWatchMsg)\r\n    },\r\n  },\r\n  methods: {\r\n    namesakeMixinMethod(): string {\r\n      const res = '组件内部的同名 method'\r\n      console.log(res)\r\n      return res\r\n    },\r\n    changeGlobalMixinOnloadMsg1(){\r\n      this.globalMixinOnloadMsg1 = 'new globalMixinOnloadMsg1 changed in comp2'\r\n    }\r\n  }\r\n}\r\n</script>\r\n\n```",
       "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/component-instance/mixins/components/Comp2"
     },
     "mixins_components_CompForComp": {
@@ -693,7 +693,7 @@
     },
     "v-bind_v-bind-options": {
       "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/directive/v-bind/v-bind-options.uvue",
-      "code": "```vue\n<template>\n  <view class=\"page\">\n    <!-- v-bind attribute -->\n    <button id=\"disabled-btn\" class=\"mb-10\" :disabled=\"true\">:disabled true</button>\n    <button id=\"v-bind-disabled-btn\" class=\"mb-10\" v-bind:disabled=\"false\">v-bind:disabled false</button>\n\n    <!-- v-bind style -->\n    <view class=\"flex justify-between flex-row mb-10\">\n      <text>bind object style fontSize:</text>\n      <text id=\"bind-object-style\" :style=\"{ fontSize: dataInfo.fontSize }\">\n        {{ dataInfo.fontSize }}\n      </text>\n    </view>\n    <view id=\"bind-array-style\" class=\"mb-10 p-10\" :style=\"[dataInfo.backgroundColor, dataInfo.border]\">\n      <view>bind arr style</view>\n      <view class=\"my-10\">{{ dataInfo.backgroundColor }}</view>\n      <view>{{ dataInfo.border }}</view>\n    </view>\n\n    <!-- v-bind props -->\n    <Foo :title :num=\"dataInfo.fooProps.num\" :obj=\"dataInfo.fooProps.obj\" />\n\n    <!-- v-bind in style -->\n    <!-- #ifdef WEB -->\n    <view class=\"mb-10 v-bind-css\"></view>\n    <!-- #endif -->\n  </view>\n</template>\n\n<script lang=\"uts\">\nimport Foo from './Foo-options.uvue'\n\ntype FooPropsObj = {\n  name: string\n}\ntype FooProps = {\n  title: string\n  num: number\n  obj: FooPropsObj\n}\ntype DataInfo = {\n  fontSize: string\n  backgroundColor: string\n  border: string\n  fooProps: FooProps\n  vBindClassBackgroundColor: string\n}\n\nexport default {\n  components: { Foo },\n  data() {\n    return {\n      title: 'foo title',\n      dataInfo: {\n        fontSize: '20px',\n        backgroundColor: 'background-color: green',\n        border: 'border: 2px solid red',\n        fooProps: {\n          title: '',\n          num: 1,\n          obj: {\n            name: 'foo obj name'\n          }\n        },\n        vBindClassBackgroundColor: 'red'\n      } as DataInfo\n    }\n  }\n}\n</script>\n\n<style>\n/* #ifdef WEB */\n.v-bind-css {\n  background-color: v-bind(dataInfo.vBindClassBackgroundColor);\n  height: 20px;\n}\n/* #endif */\n</style>\n\n```",
+      "code": "```vue\n<template>\r\n  <view class=\"page\">\r\n    <!-- v-bind attribute -->\r\n    <button id=\"disabled-btn\" class=\"mb-10\" :disabled=\"true\">:disabled true</button>\r\n    <button id=\"v-bind-disabled-btn\" class=\"mb-10\" v-bind:disabled=\"false\">v-bind:disabled false</button>\r\n\r\n    <!-- v-bind style -->\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>bind object style fontSize:</text>\r\n      <text id=\"bind-object-style\" :style=\"{ fontSize: dataInfo.fontSize }\">\r\n        {{ dataInfo.fontSize }}\r\n      </text>\r\n    </view>\r\n    <view id=\"bind-array-style\" class=\"mb-10 p-10\" :style=\"[dataInfo.backgroundColor, dataInfo.border]\">\r\n      <view>bind arr style</view>\r\n      <view class=\"my-10\">{{ dataInfo.backgroundColor }}</view>\r\n      <view>{{ dataInfo.border }}</view>\r\n    </view>\r\n\r\n    <!-- v-bind props -->\r\n    <Foo :title=\"dataInfo.fooProps.title\" :num=\"dataInfo.fooProps.num\" :obj=\"dataInfo.fooProps.obj\" />\r\n\r\n    <!-- v-bind in style -->\r\n    <!-- #ifdef WEB -->\r\n    <view class=\"mb-10 v-bind-css\"></view>\r\n    <!-- #endif -->\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport Foo from './Foo-options.uvue'\r\n\r\ntype FooPropsObj = {\r\n  name: string\r\n}\r\ntype FooProps = {\r\n  title: string\r\n  num: number\r\n  obj: FooPropsObj\r\n}\r\ntype DataInfo = {\r\n  fontSize: string\r\n  backgroundColor: string\r\n  border: string\r\n  fooProps: FooProps\r\n  vBindClassBackgroundColor: string\r\n}\r\n\r\nexport default {\r\n  components: { Foo },\r\n  data() {\r\n    return {\r\n      dataInfo: {\r\n        fontSize: '20px',\r\n        backgroundColor: 'background-color: green',\r\n        border: 'border: 2px solid red',\r\n        fooProps: {\r\n          title: 'foo title',\r\n          num: 1,\r\n          obj: {\r\n            name: 'foo obj name'\r\n          }\r\n        },\r\n        vBindClassBackgroundColor: 'red'\r\n      } as DataInfo\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style>\r\n/* #ifdef WEB */\r\n.v-bind-css {\r\n  background-color: v-bind(dataInfo.vBindClassBackgroundColor);\r\n  height: 20px;\r\n}\r\n/* #endif */\r\n</style>\r\n\n```",
       "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/directive/v-bind/v-bind-options"
     },
     "v-for_v-for-composition": {
@@ -911,16 +911,6 @@
     }
   },
   "E_built-in": {
-    "component_component_component-composition": {
-      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/component/component-composition.uvue",
-      "code": "```vue\n<template>\r\n  <view class=\"container\">\r\n    <component :is=\"currentComponentStr\" />\r\n    <component :is=\"currentComponentInstance\" />\r\n    <button @click=\"changeCurrentComponent\">change current component</button>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport Foo from '../../../../components/Foo.uvue'\r\nimport Bar from '../../../../components/Bar.uvue'\r\nexport default {\r\n  components: {\r\n    Foo,\r\n    Bar\r\n  },\r\n  data() {\r\n    return {\r\n      currentComponentStr: 'Foo',\r\n      currentComponentInstance: Foo\r\n    }\r\n  },\r\n  methods: {\r\n    changeCurrentComponent() {\r\n      if (this.currentComponentStr === 'Foo') {\r\n        this.currentComponentStr = 'Bar'\r\n        this.currentComponentInstance = Bar\r\n      } else {\r\n        this.currentComponentStr = 'Foo'\r\n        this.currentComponentInstance = Foo\r\n      }\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style>\r\n.item {\r\n  display: flex;\r\n  flex-direction: row;\r\n  margin: 15px;\r\n  border: #eee solid 1px;\r\n}\r\n</style>\n```",
-      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/component/component-composition"
-    },
-    "component_component_component-options": {
-      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/component/component-options.uvue",
-      "code": "```vue\n<template>\r\n  <view class=\"container\">\r\n    <component :is=\"currentComponentStr\" />\r\n    <component :is=\"currentComponentInstance\" />\r\n    <button @click=\"changeCurrentComponent\">change current component</button>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport Foo from '../../../../components/Foo.uvue'\r\nimport Bar from '../../../../components/Bar.uvue'\r\nexport default {\r\n  components: {\r\n    Foo,\r\n    Bar\r\n  },\r\n  data() {\r\n    return {\r\n      currentComponentStr: 'Foo',\r\n      currentComponentInstance: Foo\r\n    }\r\n  },\r\n  methods: {\r\n    changeCurrentComponent() {\r\n      if (this.currentComponentStr === 'Foo') {\r\n        this.currentComponentStr = 'Bar'\r\n        this.currentComponentInstance = Bar\r\n      } else {\r\n        this.currentComponentStr = 'Foo'\r\n        this.currentComponentInstance = Foo\r\n      }\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style>\r\n.item {\r\n  display: flex;\r\n  flex-direction: row;\r\n  margin: 15px;\r\n  border: #eee solid 1px;\r\n}\r\n</style>\n```",
-      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/component/component-options"
-    },
     "component_keep-alive_keep-alive-composition": {
       "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/keep-alive/keep-alive-composition.uvue",
       "code": "```vue\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1\">\r\n    <!-- #endif -->\r\n    <view class=\"page\">\r\n      <text class=\"bold mb-10\">include=\"Counter,Message\"</text>\r\n      <KeepAlive include=\"Counter,Message\">\r\n        <component :is=\"currentComponent\"></component>\r\n      </KeepAlive>\r\n      <view class=\"hr\"></view>\r\n      <text class=\"bold mt-10 mb-10\">:include=\"/Counter|Message/\"</text>\r\n      <KeepAlive :include=\"/Counter|Message/\">\r\n        <component :is=\"currentComponent\"></component>\r\n      </KeepAlive>\r\n      <view class=\"hr\"></view>\r\n      <text class=\"bold mb-10 mb-10\">:include=\"['Counter', 'Message']\"</text>\r\n      <KeepAlive :include=\"['Counter', 'Message']\">\r\n        <component :is=\"currentComponent\"></component>\r\n      </KeepAlive>\r\n      <view class=\"hr\"></view>\r\n      <text class=\"bold mt-10 mb-10\">exclude=\"ShouldExclude\"</text>\r\n      <KeepAlive exclude=\"ShouldExclude\">\r\n        <component :is=\"currentComponent\"></component>\r\n      </KeepAlive>\r\n      <view class=\"hr\"></view>\r\n      <text class=\"bold mt-10 mb-10\">:max=\"2\"</text>\r\n      <KeepAlive :max=\"2\">\r\n        <component :is=\"currentComponent\"></component>\r\n      </KeepAlive>\r\n      <view class=\"hr\"></view>\r\n      <button class=\"mt-10 show-counter\" @click=\"changeComponent('Counter')\">show Counter</button>\r\n      <button class=\"mt-10 show-message\" @click=\"changeComponent('Message')\">show Message</button>\r\n      <button class=\"mt-10 show-should-exclude\" @click=\"changeComponent('ShouldExclude')\">show ShouldExclude</button>\r\n    </view>\r\n    <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport Counter from '@/components/keep-alive/Counter.uvue'\r\nimport Message from '@/components/keep-alive/Message.uvue'\r\nimport ShouldExclude from '@/components/keep-alive/ShouldExclude.uvue'\r\n\r\ndefineOptions({\r\n  components: {\r\n    Counter,\r\n    Message,\r\n    ShouldExclude\r\n  }\r\n})\r\n\r\nconst currentComponent = ref<string>('ShouldExclude')\r\n\r\nconst changeComponent = (componentName: string) => {\r\n  currentComponent.value = componentName\r\n}\r\n</script>\r\n\r\n<style>\r\n.hr {\r\n  margin: 30rpx 0;\r\n  border-bottom: 1px solid #ccc;\r\n}\r\n</style>\n```",
@@ -931,26 +921,6 @@
       "code": "```vue\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1\">\r\n    <!-- #endif -->\r\n    <view class=\"page\">\r\n      <text class=\"bold mb-10\">include \"Counter,Message\"</text>\r\n      <KeepAlive include=\"Counter,Message\">\r\n        <component :is=\"currentComponent\"></component>\r\n      </KeepAlive>\r\n      <view class=\"hr\"></view>\r\n      <text class=\"bold mt-10 mb-10\">include \"/Counter|Message/\"</text>\r\n      <KeepAlive :include=\"/Counter|Message/\">\r\n        <component :is=\"currentComponent\"></component>\r\n      </KeepAlive>\r\n      <view class=\"hr\"></view>\r\n      <text class=\"bold mt-10 mb-10\">include \"['Counter', 'Message']\"</text>\r\n      <KeepAlive :include=\"['Counter', 'Message']\">\r\n        <component :is=\"currentComponent\"></component>\r\n      </KeepAlive>\r\n      <view class=\"hr\"></view>\r\n      <text class=\"bold mt-10 mb-10\">exclude \"ShouldExclude\"</text>\r\n      <KeepAlive exclude=\"ShouldExclude\">\r\n        <component :is=\"currentComponent\"></component>\r\n      </KeepAlive>\r\n      <view class=\"hr\"></view>\r\n      <text class=\"bold mt-10 mb-10\">max 2</text>\r\n      <KeepAlive :max=\"2\">\r\n        <component :is=\"currentComponent\"></component>\r\n      </KeepAlive>\r\n      <view class=\"hr\"></view>\r\n      <button class=\"mt-10 show-counter\" @click=\"changeComponent('Counter')\">show Counter</button>\r\n      <button class=\"mt-10 show-message\" @click=\"changeComponent('Message')\">show Message</button>\r\n      <button class=\"mt-10 show-should-exclude\" @click=\"changeComponent('ShouldExclude')\">show ShouldExclude</button>\r\n    </view>\r\n    <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport Counter from '@/components/keep-alive/Counter.uvue'\r\nimport Message from '@/components/keep-alive/Message.uvue'\r\nimport ShouldExclude from '@/components/keep-alive/ShouldExclude.uvue'\r\nexport default {\r\n  components: {\r\n    Counter,\r\n    Message,\r\n    ShouldExclude\r\n  },\r\n  data() {\r\n    return {\r\n      currentComponent: 'ShouldExclude'\r\n    }\r\n  },\r\n  methods: {\r\n    changeComponent(componentName: string) {\r\n      this.currentComponent = componentName\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style>\r\n.hr {\r\n  margin-top: 30rpx;\r\n  border-bottom: 1px solid #ccc;\r\n}\r\n</style>\n```",
       "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/keep-alive/keep-alive-options"
     },
-    "component_slots_child-composition": {
-      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/slots/child-composition.uvue",
-      "code": "```vue\n<template>\r\n  <view class=\"container\">\r\n    <view>\r\n      <slot name=\"header\" msg=\"Here might be a page title\"></slot>\r\n    </view>\r\n    <view>\r\n      <slot msg=\"A paragraph for the main content.\"></slot>\r\n    </view>\r\n    <view>\r\n      <slot name=\"footer\" msg=\"Here's some contact info\"></slot>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ndefineOptions({\r\n  name: 'child'\r\n})\r\n\r\ndefineSlots<{\r\n  default(props: { msg: string }): any\r\n  header(props: { msg: string }): any\r\n  footer(props: { msg: string }): any\r\n}>()\r\n</script>\n```",
-      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/slots/child-composition"
-    },
-    "component_slots_child-options": {
-      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/slots/child-options.uvue",
-      "code": "```vue\n<template>\r\n  <view class=\"container\">\r\n    <view>\r\n      <slot name=\"header\" msg=\"Here might be a page title\"></slot>\r\n    </view>\r\n    <view>\r\n      <slot msg=\"A paragraph for the main content.\"></slot>\r\n    </view>\r\n    <view>\r\n      <slot name=\"footer\" msg=\"Here's some contact info\"></slot>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport { SlotsType } from 'vue'\r\nexport default {\r\n  name: 'child',\r\n  slots: Object as SlotsType<{\r\n    header: { msg: string }\r\n    default: { msg: string }\r\n    footer: { msg: string }\r\n  }>\r\n}\r\n</script>\r\n\n```",
-      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/slots/child-options"
-    },
-    "component_slots_slots-composition": {
-      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/slots/slots-composition.uvue",
-      "code": "```vue\n<template>\r\n  <view class=\"content\">\r\n    <child>\r\n      <template v-slot:header=\"slotProps\">\r\n        <view class=\"header\">{{ slotProps.msg }}</view>\r\n      </template>\r\n      <template v-slot:default=\"{ msg }\">\r\n        <view class=\"main\">{{ msg }}</view>\r\n      </template>\r\n      <template #footer=\"{ msg: text }\">\r\n        <view class=\"footer\">{{ text }}</view>\r\n      </template>\r\n    </child>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport child from './child-composition.uvue'\r\n</script>\n```",
-      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/slots/slots-composition"
-    },
-    "component_slots_slots-options": {
-      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/slots/slots-options.uvue",
-      "code": "```vue\n<template>\r\n  <view class=\"content\">\r\n    <child>\r\n      <template v-slot:header=\"slotProps\">\r\n        <view class=\"header\">{{ slotProps.msg }}</view>\r\n      </template>\r\n      <template v-slot:default=\"{ msg }\">\r\n        <view class=\"main\">{{ msg }}</view>\r\n      </template>\r\n      <template #footer=\"{ msg: text }\">\r\n        <view class=\"footer\">{{ text }}</view>\r\n      </template>\r\n    </child>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport child from './child-options.uvue'\r\nexport default {\r\n  components: { child }\r\n}\r\n</script>\n```",
-      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/slots/slots-options"
-    },
     "component_teleport_teleport-composition": {
       "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/teleport/teleport-composition.uvue",
       "code": "```vue\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1\">\r\n    <!-- #endif -->\r\n    <view id=\"container\" class=\"container\">\r\n      <text class=\"text\">.container 区域</text>\r\n      <view id=\"content1\" class=\"content content-1\">\r\n        <text class=\"text\">content1 区域</text>\r\n      </view>\r\n      <view id=\"content2\" class=\"content content-2\">\r\n        <text class=\"text\">content2 区域</text>\r\n      </view>\r\n      <teleport v-if=\"show\" to=\"#content1\" :disabled=\"disabled\">\r\n        <view class=\"send-content\">\r\n          <text class=\"send-content-text\">内容在.container中，使用teleport在#content1元素中展示</text>\r\n        </view>\r\n      </teleport>\r\n    </view>\r\n    <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst to = ref<string>('content1')\r\nconst showingString = ref<string>('穿梭内容在 body 中')\r\nconst disabled = ref<boolean>(false)\r\nconst show = ref<boolean>(false)\r\n\r\nonReady(() => {\r\n  // 需要等内容挂载后，teleport才生效\r\n  show.value = true\r\n})\r\nconst changePosition = () => {\r\n  to.value = '#content1'\r\n}\r\n\r\ndefineExpose({\r\n  changePosition\r\n})\r\n</script>\r\n\r\n<style>\r\n.container {\r\n  background-color: #f5f5f5;\r\n  border: 1px #ccc solid;\r\n  margin: 5px;\r\n  padding: 10px;\r\n}\r\n\r\n.text {\r\n  margin: 5px 0;\r\n}\r\n\r\n.content {\r\n  height: 120px;\r\n  border: 1px #ccc solid;\r\n  margin: 5px;\r\n  padding: 10px;\r\n}\r\n\r\n.send-content {\r\n  padding: 5px;\r\n  background-color: #ff5a5f;\r\n  height: 50px;\r\n}\r\n\r\n.send-content-text {\r\n  color: #fff;\r\n  font-size: 12px;\r\n}\r\n</style>\n```",
@@ -961,25 +931,55 @@
       "code": "```vue\n<template>\r\n  <!-- #ifdef APP -->\r\n  <scroll-view style=\"flex: 1\">\r\n    <!-- #endif -->\r\n    <view id=\"container\" class=\"container\">\r\n      <text class=\"text\">.container 区域</text>\r\n      <view id=\"content1\" class=\"content content-1\">\r\n        <text class=\"text\">content1 区域</text>\r\n      </view>\r\n      <view id=\"content2\" class=\"content content-2\">\r\n        <text class=\"text\">content2 区域</text>\r\n      </view>\r\n      <teleport v-if=\"show\" to=\"#content1\" :disabled=\"disabled\">\r\n        <view class=\"send-content\">\r\n          <text class=\"send-content-text\">内容在.container中，使用teleport在#content1元素中展示</text>\r\n        </view>\r\n      </teleport>\r\n    </view>\r\n    <!-- #ifdef APP -->\r\n  </scroll-view>\r\n  <!-- #endif -->\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  data() {\r\n    return {\r\n      to: 'content1',\r\n      disabled: false,\r\n      showingString: '穿梭内容在 body 中',\r\n      show: false\r\n    }\r\n  },\r\n  onReady() {\r\n    // 需要等内容挂载后，teleport才生效\r\n    this.show = true\r\n  },\r\n  methods: {\r\n    changePosition() {\r\n      this.to = '#content1'\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style>\r\n.container {\r\n  background-color: #f5f5f5;\r\n  border: 1px #ccc solid;\r\n  margin: 5px;\r\n  padding: 10px;\r\n}\r\n.text {\r\n  margin: 5px 0;\r\n}\r\n\r\n.content {\r\n  height: 120px;\r\n  border: 1px #ccc solid;\r\n  margin: 5px;\r\n  padding: 10px;\r\n}\r\n\r\n.send-content {\r\n  padding: 5px;\r\n  background-color: #ff5a5f;\r\n  height: 50px;\r\n}\r\n\r\n.send-content-text {\r\n  color: #fff;\r\n  font-size: 12px;\r\n}\r\n</style>\r\n\n```",
       "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/teleport/teleport-options"
     },
-    "component_template_template-composition": {
-      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/template/template-composition.uvue",
-      "code": "```vue\n<template>\r\n  <view class=\"page\">\r\n    <template v-if=\"isShow\">\r\n      <view class=\"title\">{{ title }}</view>\r\n    </template>\r\n    <view class=\"show-botton\" @click=\"handleShow\">{{ isShow ? '点击隐藏' : '点击显示' }}</view>\r\n    <template v-for=\"(item, index) in list\" :key=\"index\">\r\n      <view class=\"item\">{{ index + 1 }}.{{ item.name }}</view>\r\n    </template>\r\n    <button @click=\"goMapStyle\">跳转绑定 Map 类型 style 页面</button>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype ListItem = {\r\n  name: string\r\n}\r\n\r\n// 自动化测试拿不到 ref\r\ndefineOptions({\r\n  data() {\r\n    return {\r\n      isShow: false\r\n    }\r\n  },\r\n  methods: {\r\n    handleShow() {\r\n      this.isShow = !this.isShow\r\n    }\r\n  }\r\n})\r\n\r\nconst title = ref<string>('hello')\r\nconst list = ref<ListItem[]>([\r\n  {\r\n    name: 'foo1'\r\n  },\r\n  {\r\n    name: 'foo2'\r\n  }\r\n] as ListItem[])\r\n\r\nconst goMapStyle = () => {\r\n  uni.navigateTo({ url: '/pages/built-in/component/template/template-map-style-composition' })\r\n}\r\n\r\ndefineExpose({\r\n  goMapStyle\r\n})\r\n</script>\r\n\r\n<style>\r\n.item {\r\n  display: flex;\r\n  flex-direction: row;\r\n  margin: 15px;\r\n  border: #eee solid 1px;\r\n}\r\n</style>\n```",
-      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/template/template-composition"
+    "special-elements_component_component-composition": {
+      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/component/component-composition.uvue",
+      "code": "```vue\n<template>\r\n  <view class=\"container\">\r\n    <component :is=\"currentComponentStr\" />\r\n    <component :is=\"currentComponentInstance\" />\r\n    <button @click=\"changeCurrentComponent\">change current component</button>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport Foo from '../../../../components/Foo.uvue'\r\nimport Bar from '../../../../components/Bar.uvue'\r\nexport default {\r\n  components: {\r\n    Foo,\r\n    Bar\r\n  },\r\n  data() {\r\n    return {\r\n      currentComponentStr: 'Foo',\r\n      currentComponentInstance: Foo\r\n    }\r\n  },\r\n  methods: {\r\n    changeCurrentComponent() {\r\n      if (this.currentComponentStr === 'Foo') {\r\n        this.currentComponentStr = 'Bar'\r\n        this.currentComponentInstance = Bar\r\n      } else {\r\n        this.currentComponentStr = 'Foo'\r\n        this.currentComponentInstance = Foo\r\n      }\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style>\r\n.item {\r\n  display: flex;\r\n  flex-direction: row;\r\n  margin: 15px;\r\n  border: #eee solid 1px;\r\n}\r\n</style>\n```",
+      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/component/component-composition"
+    },
+    "special-elements_component_component-options": {
+      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/component/component-options.uvue",
+      "code": "```vue\n<template>\r\n  <view class=\"container\">\r\n    <component :is=\"currentComponentStr\" />\r\n    <component :is=\"currentComponentInstance\" />\r\n    <button @click=\"changeCurrentComponent\">change current component</button>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport Foo from '../../../../components/Foo.uvue'\r\nimport Bar from '../../../../components/Bar.uvue'\r\nexport default {\r\n  components: {\r\n    Foo,\r\n    Bar\r\n  },\r\n  data() {\r\n    return {\r\n      currentComponentStr: 'Foo',\r\n      currentComponentInstance: Foo\r\n    }\r\n  },\r\n  methods: {\r\n    changeCurrentComponent() {\r\n      if (this.currentComponentStr === 'Foo') {\r\n        this.currentComponentStr = 'Bar'\r\n        this.currentComponentInstance = Bar\r\n      } else {\r\n        this.currentComponentStr = 'Foo'\r\n        this.currentComponentInstance = Foo\r\n      }\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style>\r\n.item {\r\n  display: flex;\r\n  flex-direction: row;\r\n  margin: 15px;\r\n  border: #eee solid 1px;\r\n}\r\n</style>\n```",
+      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/component/component-options"
+    },
+    "special-elements_slots_child-composition": {
+      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/slots/child-composition.uvue",
+      "code": "```vue\n<template>\r\n  <view class=\"container\">\r\n    <view>\r\n      <slot name=\"header\" msg=\"Here might be a page title\"></slot>\r\n    </view>\r\n    <view>\r\n      <slot msg=\"A paragraph for the main content.\"></slot>\r\n    </view>\r\n    <view>\r\n      <slot name=\"footer\" msg=\"Here's some contact info\"></slot>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ndefineOptions({\r\n  name: 'child'\r\n})\r\n\r\ndefineSlots<{\r\n  default(props: { msg: string }): any\r\n  header(props: { msg: string }): any\r\n  footer(props: { msg: string }): any\r\n}>()\r\n</script>\n```",
+      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/slots/child-composition"
+    },
+    "special-elements_slots_child-options": {
+      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/slots/child-options.uvue",
+      "code": "```vue\n<template>\r\n  <view class=\"container\">\r\n    <view>\r\n      <slot name=\"header\" msg=\"Here might be a page title\"></slot>\r\n    </view>\r\n    <view>\r\n      <slot msg=\"A paragraph for the main content.\"></slot>\r\n    </view>\r\n    <view>\r\n      <slot name=\"footer\" msg=\"Here's some contact info\"></slot>\r\n    </view>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport { SlotsType } from 'vue'\r\nexport default {\r\n  name: 'child',\r\n  slots: Object as SlotsType<{\r\n    header: { msg: string }\r\n    default: { msg: string }\r\n    footer: { msg: string }\r\n  }>\r\n}\r\n</script>\r\n\n```",
+      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/slots/child-options"
+    },
+    "special-elements_slots_slots-composition": {
+      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/slots/slots-composition.uvue",
+      "code": "```vue\n<template>\r\n  <view class=\"content\">\r\n    <child>\r\n      <template v-slot:header=\"slotProps\">\r\n        <view class=\"header\">{{ slotProps.msg }}</view>\r\n      </template>\r\n      <template v-slot:default=\"{ msg }\">\r\n        <view class=\"main\">{{ msg }}</view>\r\n      </template>\r\n      <template #footer=\"{ msg: text }\">\r\n        <view class=\"footer\">{{ text }}</view>\r\n      </template>\r\n    </child>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nimport child from './child-composition.uvue'\r\n</script>\n```",
+      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/slots/slots-composition"
+    },
+    "special-elements_slots_slots-options": {
+      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/slots/slots-options.uvue",
+      "code": "```vue\n<template>\r\n  <view class=\"content\">\r\n    <child>\r\n      <template v-slot:header=\"slotProps\">\r\n        <view class=\"header\">{{ slotProps.msg }}</view>\r\n      </template>\r\n      <template v-slot:default=\"{ msg }\">\r\n        <view class=\"main\">{{ msg }}</view>\r\n      </template>\r\n      <template #footer=\"{ msg: text }\">\r\n        <view class=\"footer\">{{ text }}</view>\r\n      </template>\r\n    </child>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nimport child from './child-options.uvue'\r\nexport default {\r\n  components: { child }\r\n}\r\n</script>\n```",
+      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/slots/slots-options"
+    },
+    "special-elements_template_template-composition": {
+      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/template/template-composition.uvue",
+      "code": "```vue\n<template>\r\n  <view class=\"page\">\r\n    <template v-if=\"dataInfo.isShow\">\r\n      <view class=\"title\">{{ title }}</view>\r\n    </template>\r\n    <view class=\"show-botton\" @click=\"handleShow\">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</view>\r\n    <template v-for=\"(item, index) in list\" :key=\"index\">\r\n      <view class=\"item\">{{ index + 1 }}.{{ item.name }}</view>\r\n    </template>\r\n    <button @click=\"goMapStyle\">跳转绑定 Map 类型 style 页面</button>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\ntype DataInfo = {\r\n  isShow: boolean\r\n}\r\ntype ListItem = {\r\n  name: string\r\n}\r\n\r\nconst dataInfo = reactive({\r\n  isShow: false\r\n} as DataInfo)\r\n\r\nconst title = ref<string>('hello')\r\nconst list = ref<ListItem[]>([\r\n  {\r\n    name: 'foo1'\r\n  },\r\n  {\r\n    name: 'foo2'\r\n  }\r\n] as ListItem[])\r\n\r\nconst handleShow = () => {\r\n  dataInfo.isShow = !dataInfo.isShow\r\n}\r\n\r\nconst goMapStyle = () => {\r\n  uni.navigateTo({ url: '/pages/built-in/component/template/template-map-style-composition' })\r\n}\r\n\r\ndefineExpose({\r\n  dataInfo,\r\n  goMapStyle\r\n})\r\n</script>\r\n\r\n<style>\r\n.item {\r\n  display: flex;\r\n  flex-direction: row;\r\n  margin: 15px;\r\n  border: #eee solid 1px;\r\n}\r\n</style>\n```",
+      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/template/template-composition"
     },
-    "component_template_template-map-style-composition": {
-      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/template/template-map-style-composition.uvue",
+    "special-elements_template_template-map-style-composition": {
+      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/template/template-map-style-composition.uvue",
       "code": "```vue\n<template>\r\n  <view class=\"page\">\r\n    <view :style=\"[styleW200, styleRounded, styleBorder]\" :class=\"[classPadding10, classBgRed]\">\r\n      <text>width:200px;</text>\r\n      <text>padding:10px;</text>\r\n      <text>border-radius:8px;</text>\r\n      <text>border:1px solid #ccc;</text>\r\n      <text>background-color: red;</text>\r\n      <text class=\"text-white\">this text color: #fff;</text>\r\n    </view>\r\n    <view :style=\"[stylePadding10, styleBgGreen, styleMargin10]\" :class=\"[classH200, classRounded, classBorder, classBorderRed]\">\r\n      <text>height:200px;</text>\r\n      <text>margin:10px;</text>\r\n      <text>padding:10px;</text>\r\n      <text>border-radius:8px;</text>\r\n      <text>border:1px solid #ccc;</text>\r\n      <text>border-color:red;</text>\r\n      <text>background-color: green;</text>\r\n      <text class=\"text-blue\">this text color: blue;</text>\r\n    </view>\r\n    <view :style=\"styleBgBlue\" :class=\"classPadding10\">\r\n      <text>padding:10px;</text>\r\n      <text>background-color: blue;</text>\r\n      <text class=\"text-red\">this text color: red;</text>\r\n    </view>\r\n    <button class=\"mt-10\" id=\"btn\" @click=\"toggleIsClassValid\">toggle isClassValid</button>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst styleW200 = ref(new Map<string, string>([['width', '200px']]))\r\nconst styleH200 = ref(new Map<string, string>([['height', '200px']]))\r\nconst stylePadding10 = ref(new Map<string, string>([['padding', '10px']]))\r\nconst styleMargin10 = ref(new Map<string, string>([['margin', '10px']]))\r\nconst styleRounded = ref(new Map<string, string>([['border-radius', '8px']]))\r\nconst styleBorder = ref(new Map<string, string>([['border', '1px solid #ccc']]))\r\nconst styleBorderRed = ref(new Map<string, string>([['border-color', 'red']]))\r\nconst styleBorderBlue = ref(new Map<string, string>([['border-color', 'blue']]))\r\nconst styleBorderGreen = ref(new Map<string, string>([['border-color', 'green']]))\r\nconst styleBgGreen = ref(new Map<string, string>([['background-color', 'green']]))\r\nconst styleBgBlue = ref(new Map<string, string>([['background-color', 'blue']]))\r\nconst styleBgRed = ref(new Map<string, string>([['background-color', 'red']]))\r\nconst styleTextWhite = ref(new Map<string, string>([['color', '#fff']]))\r\nconst styleTextBlack = ref(new Map<string, string>([['color', '#000']]))\r\nconst styleTextRed = ref(new Map<string, string>([['color', 'red']]))\r\nconst styleTextBlue = ref(new Map<string, string>([['color', 'blue']]))\r\nconst styleTextGreen = ref(new Map<string, string>([['color', 'green']]))\r\nconst isClassValid = ref(true)\r\nconst classW200 = ref(new Map<string, boolean>([['w-200', true]]))\r\nconst classH200 = ref(new Map<string, boolean>([['h-200', true]]))\r\nconst classPadding10 = ref(new Map<string, boolean>([['padding-10', true]]))\r\nconst classMargin10 = ref(new Map<string, boolean>([['margin-10', true]]))\r\nconst classRounded = ref(new Map<string, boolean>([['rounded', true]]))\r\nconst classBorder = ref(new Map<string, boolean>([['border', true]]))\r\nconst classBorderRed = ref(new Map<string, boolean>([['border-red', true]]))\r\nconst classBorderBlue = ref(new Map<string, boolean>([['border-blue', true]]))\r\nconst classBorderGreen = ref(new Map<string, boolean>([['border-green', true]]))\r\nconst classBgGreen = ref(new Map<string, boolean>([['bg-green', true]]))\r\nconst classBgBlue = ref(new Map<string, boolean>([['bg-blue', true]]))\r\nconst classBgRed = ref(new Map<string, boolean>([['bg-red', true]]))\r\nconst classTextWhite = ref(new Map<string, boolean>([['text-white', true]]))\r\nconst classTextBlack = ref(new Map<string, boolean>([['text-black', true]]))\r\nconst classTextRed = ref(new Map<string, boolean>([['text-red', true]]))\r\nconst classTextBlue = ref(new Map<string, boolean>([['text-blue', true]]))\r\nconst classTextGreen = ref(new Map<string, boolean>([['text-green', true]]))\r\nconst toggleIsClassValid = () => {\r\n  isClassValid.value = !isClassValid.value\r\n  classW200.value = new Map<string, boolean>([['w-200', isClassValid.value]])\r\n  classH200.value = new Map<string, boolean>([['h-200', isClassValid.value]])\r\n  classPadding10.value = new Map<string, boolean>([['padding-10', isClassValid.value]])\r\n  classMargin10.value = new Map<string, boolean>([['margin-10', isClassValid.value]])\r\n  classRounded.value = new Map<string, boolean>([['rounded', isClassValid.value]])\r\n  classBorder.value = new Map<string, boolean>([['border', isClassValid.value]])\r\n  classBorderRed.value = new Map<string, boolean>([['border-red', isClassValid.value]])\r\n  classBorderBlue.value = new Map<string, boolean>([['border-blue', isClassValid.value]])\r\n  classBorderGreen.value = new Map<string, boolean>([['border-green', isClassValid.value]])\r\n  classBgGreen.value = new Map<string, boolean>([['bg-green', isClassValid.value]])\r\n  classBgBlue.value = new Map<string, boolean>([['bg-blue', isClassValid.value]])\r\n  classBgRed.value = new Map<string, boolean>([['bg-red', isClassValid.value]])\r\n  classTextWhite.value = new Map<string, boolean>([['text-white', isClassValid.value]])\r\n  classTextBlack.value = new Map<string, boolean>([['text-black', isClassValid.value]])\r\n  classTextRed.value = new Map<string, boolean>([['text-red', isClassValid.value]])\r\n  classTextBlue.value = new Map<string, boolean>([['text-blue', isClassValid.value]])\r\n  classTextGreen.value = new Map<string, boolean>([['text-green', isClassValid.value]])\r\n}\r\n</script>\r\n\r\n<style>\r\n.w-200 {\r\n  width: 200px;\r\n}\r\n\r\n.h-200 {\r\n  height: 200px;\r\n}\r\n\r\n.padding-10 {\r\n  padding: 10px;\r\n}\r\n\r\n.margin-10 {\r\n  margin: 10px;\r\n}\r\n\r\n.rounded {\r\n  border-radius: 8px;\r\n}\r\n\r\n.border {\r\n  border: 1px solid #ccc;\r\n}\r\n\r\n.border-red {\r\n  border-color: red;\r\n}\r\n\r\n.border-green {\r\n  border-color: green;\r\n}\r\n\r\n.border-blue {\r\n  border-color: blue;\r\n}\r\n\r\n.bg-green {\r\n  background-color: green;\r\n}\r\n\r\n.bg-red {\r\n  background-color: red;\r\n}\r\n\r\n.bg-blue {\r\n  background-color: blue;\r\n}\r\n\r\n.text-white {\r\n  color: #fff;\r\n}\r\n\r\n.text-black {\r\n  color: #000;\r\n}\r\n\r\n.text-green {\r\n  color: green;\r\n}\r\n\r\n.text-red {\r\n  color: red;\r\n}\r\n\r\n.text-blue {\r\n  color: blue;\r\n}\r\n</style>\n```",
-      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/template/template-map-style-composition"
+      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/template/template-map-style-composition"
     },
-    "component_template_template-map-style-options": {
-      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/template/template-map-style-options.uvue",
+    "special-elements_template_template-map-style-options": {
+      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/template/template-map-style-options.uvue",
       "code": "```vue\n<template>\r\n  <view class=\"page\">\r\n    <view :style=\"[styleW200, styleRounded, styleBorder]\" :class=\"[classPadding10, classBgRed]\">\r\n      <text>width:200px;</text>\r\n      <text>padding:10px;</text>\r\n      <text>border-radius:8px;</text>\r\n      <text>border:1px solid #ccc;</text>\r\n      <text>background-color: red;</text>\r\n      <text class=\"text-white\">this text color: #fff;</text>\r\n    </view>\r\n    <view :style=\"[stylePadding10, styleBgGreen, styleMargin10]\" :class=\"[classH200, classRounded, classBorder, classBorderRed]\">\r\n      <text>height:200px;</text>\r\n      <text>margin:10px;</text>\r\n      <text>padding:10px;</text>\r\n      <text>border-radius:8px;</text>\r\n      <text>border:1px solid #ccc;</text>\r\n      <text>border-color:red;</text>\r\n      <text>background-color: green;</text>\r\n      <text class=\"text-blue\">this text color: blue;</text>\r\n    </view>\r\n    <view :style=\"styleBgBlue\" :class=\"classPadding10\">\r\n      <text>padding:10px;</text>\r\n      <text>background-color: blue;</text>\r\n      <text class=\"text-red\">this text color: red;</text>\r\n    </view>\r\n    <button class=\"mt-10\" id=\"btn\" @click=\"toggleIsClassValid\">toggle isClassValid</button>\r\n  </view>\r\n</template>\r\n\r\n<script lang=\"uts\">\r\nexport default {\r\n  data() {\r\n    return {\r\n      styleW200: new Map<string, string>([['width', '200px']]),\r\n      styleH200: new Map<string, string>([['height', '200px']]),\r\n      stylePadding10: new Map<string, string>([['padding', '10px']]),\r\n      styleMargin10: new Map<string, string>([['margin', '10px']]),\r\n      styleRounded: new Map<string, string>([['border-radius', '8px']]),\r\n      styleBorder: new Map<string, string>([['border', '1px solid #ccc']]),\r\n      styleBorderRed: new Map<string, string>([['border-color', 'red']]),\r\n      styleBorderBlue: new Map<string, string>([['border-color', 'blue']]),\r\n      styleBorderGreen: new Map<string, string>([['border-color', 'green']]),\r\n      styleBgGreen: new Map<string, string>([['background-color', 'green']]),\r\n      styleBgBlue: new Map<string, string>([['background-color', 'blue']]),\r\n      styleBgRed: new Map<string, string>([['background-color', 'red']]),\r\n      styleTextWhite: new Map<string, string>([['color', '#fff']]),\r\n      styleTextBlack: new Map<string, string>([['color', '#000']]),\r\n      styleTextRed: new Map<string, string>([['color', 'red']]),\r\n      styleTextBlue: new Map<string, string>([['color', 'blue']]),\r\n      styleTextGreen: new Map<string, string>([['color', 'green']]),\r\n      isClassValid: true,\r\n      classW200: new Map<string, boolean>([['w-200', true]]),\r\n      classH200: new Map<string, boolean>([['h-200', true]]),\r\n      classPadding10: new Map<string, boolean>([['padding-10', true]]),\r\n      classMargin10: new Map<string, boolean>([['margin-10', true]]),\r\n      classRounded: new Map<string, boolean>([['rounded', true]]),\r\n      classBorder: new Map<string, boolean>([['border', true]]),\r\n      classBorderRed: new Map<string, boolean>([['border-red', true]]),\r\n      classBorderBlue: new Map<string, boolean>([['border-blue', true]]),\r\n      classBorderGreen: new Map<string, boolean>([['border-green', true]]),\r\n      classBgGreen: new Map<string, boolean>([['bg-green', true]]),\r\n      classBgBlue: new Map<string, boolean>([['bg-blue', true]]),\r\n      classBgRed: new Map<string, boolean>([['bg-red', true]]),\r\n      classTextWhite: new Map<string, boolean>([['text-white', true]]),\r\n      classTextBlack: new Map<string, boolean>([['text-black', true]]),\r\n      classTextRed: new Map<string, boolean>([['text-red', true]]),\r\n      classTextBlue: new Map<string, boolean>([['text-blue', true]]),\r\n      classTextGreen: new Map<string, boolean>([['text-green', true]])\r\n    }\r\n  },\r\n  methods: {\r\n    toggleIsClassValid() {\r\n      this.isClassValid = !this.isClassValid\r\n      this.classW200 = new Map<string, boolean>([['w-200', this.isClassValid]])\r\n      this.classH200 = new Map<string, boolean>([['h-200', this.isClassValid]])\r\n      this.classPadding10 = new Map<string, boolean>([['padding-10', this.isClassValid]])\r\n      this.classMargin10 = new Map<string, boolean>([['margin-10', this.isClassValid]])\r\n      this.classRounded = new Map<string, boolean>([['rounded', this.isClassValid]])\r\n      this.classBorder = new Map<string, boolean>([['border', this.isClassValid]])\r\n      this.classBorderRed = new Map<string, boolean>([['border-red', this.isClassValid]])\r\n      this.classBorderBlue = new Map<string, boolean>([['border-blue', this.isClassValid]])\r\n      this.classBorderGreen = new Map<string, boolean>([['border-green', this.isClassValid]])\r\n      this.classBgGreen = new Map<string, boolean>([['bg-green', this.isClassValid]])\r\n      this.classBgBlue = new Map<string, boolean>([['bg-blue', this.isClassValid]])\r\n      this.classBgRed = new Map<string, boolean>([['bg-red', this.isClassValid]])\r\n      this.classTextWhite = new Map<string, boolean>([['text-white', this.isClassValid]])\r\n      this.classTextBlack = new Map<string, boolean>([['text-black', this.isClassValid]])\r\n      this.classTextRed = new Map<string, boolean>([['text-red', this.isClassValid]])\r\n      this.classTextBlue = new Map<string, boolean>([['text-blue', this.isClassValid]])\r\n      this.classTextGreen = new Map<string, boolean>([['text-green', this.isClassValid]])\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style>\r\n.w-200 {\r\n  width: 200px;\r\n}\r\n\r\n.h-200 {\r\n  height: 200px;\r\n}\r\n\r\n.padding-10 {\r\n  padding: 10px;\r\n}\r\n\r\n.margin-10 {\r\n  margin: 10px;\r\n}\r\n\r\n.rounded {\r\n  border-radius: 8px;\r\n}\r\n\r\n.border {\r\n  border: 1px solid #ccc;\r\n}\r\n\r\n.border-red {\r\n  border-color: red;\r\n}\r\n\r\n.border-green {\r\n  border-color: green;\r\n}\r\n\r\n.border-blue {\r\n  border-color: blue;\r\n}\r\n\r\n.bg-green {\r\n  background-color: green;\r\n}\r\n\r\n.bg-red {\r\n  background-color: red;\r\n}\r\n\r\n.bg-blue {\r\n  background-color: blue;\r\n}\r\n\r\n.text-white {\r\n  color: #fff;\r\n}\r\n\r\n.text-black {\r\n  color: #000;\r\n}\r\n\r\n.text-green {\r\n  color: green;\r\n}\r\n\r\n.text-red {\r\n  color: red;\r\n}\r\n\r\n.text-blue {\r\n  color: blue;\r\n}\r\n</style>\n```",
-      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/template/template-map-style-options"
+      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/template/template-map-style-options"
     },
-    "component_template_template-options": {
-      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/component/template/template-options.uvue",
-      "code": "```vue\n<template>\r\n  <view class=\"page\">\r\n    <template v-if=\"isShow\">\r\n      <view class=\"title\">{{ title }}</view>\r\n    </template>\r\n    <view class=\"show-botton\" @click=\"handleShow\">{{ isShow ? '点击隐藏' : '点击显示' }}</view>\r\n    <template v-for=\"(item, index) in list\" :key=\"index\">\r\n      <view class=\"item\">{{ index + 1 }}.{{ item.name }}</view>\r\n    </template>\r\n    <button @click=\"goMapStyle\">跳转绑定 Map 类型 style 页面</button>\r\n  </view>\r\n</template>\r\n\r\n<script>\r\ntype objType = {\r\n  name : string\r\n}\r\nexport default {\r\n  data() {\r\n    return {\r\n      title: \"hello\",\r\n      isShow: false,\r\n      list: [{\r\n        name: 'foo1'\r\n      },\r\n      {\r\n        name: 'foo2'\r\n      }\r\n      ] as objType[]\r\n    }\r\n  },\r\n  methods: {\r\n    handleShow() {\r\n      this.isShow = !this.isShow\r\n    },\r\n    goMapStyle() {\r\n      uni.navigateTo({ url: '/pages/built-in/component/template/template-map-style-options' })\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style>\r\n.item {\r\n  display: flex;\r\n  flex-direction: row;\r\n  margin: 15px;\r\n  border: #eee solid 1px;\r\n}\r\n</style>\r\n\n```",
-      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/component/template/template-options"
+    "special-elements_template_template-options": {
+      "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/built-in/special-elements/template/template-options.uvue",
+      "code": "```vue\n<template>\r\n  <view class=\"page\">\r\n    <template v-if=\"dataInfo.isShow\">\r\n      <view class=\"title\">{{ title }}</view>\r\n    </template>\r\n    <view class=\"show-botton\" @click=\"handleShow\">{{ dataInfo.isShow ? '点击隐藏' : '点击显示' }}</view>\r\n    <template v-for=\"(item, index) in list\" :key=\"index\">\r\n      <view class=\"item\">{{ index + 1 }}.{{ item.name }}</view>\r\n    </template>\r\n    <button @click=\"goMapStyle\">跳转绑定 Map 类型 style 页面</button>\r\n  </view>\r\n</template>\r\n\r\n<script lang='uts'>\r\ntype DataInfo = {\r\n  isShow: boolean\r\n}\r\ntype objType = {\r\n  name : string\r\n}\r\nexport default {\r\n  data() {\r\n    return {\r\n      title: \"hello\",\r\n      dataInfo: {\r\n        isShow: false,\r\n      } as DataInfo,\r\n      list: [{\r\n        name: 'foo1'\r\n      },\r\n      {\r\n        name: 'foo2'\r\n      }\r\n      ] as objType[]\r\n    }\r\n  },\r\n  methods: {\r\n    handleShow() {\r\n      this.dataInfo.isShow = !this.dataInfo.isShow\r\n    },\r\n    goMapStyle() {\r\n      uni.navigateTo({ url: '/pages/built-in/component/template/template-map-style-options' })\r\n    }\r\n  }\r\n}\r\n</script>\r\n\r\n<style>\r\n.item {\r\n  display: flex;\r\n  flex-direction: row;\r\n  margin: 15px;\r\n  border: #eee solid 1px;\r\n}\r\n</style>\r\n\n```",
+      "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/built-in/special-elements/template/template-options"
     }
   },
   "E_reactivity": {
@@ -1115,7 +1115,7 @@
     },
     "utilities_to-value_to-value": {
       "gitUrl": "https://gitcode.net/dcloud/hello-uvue/-/tree/alpha/pages/reactivity/utilities/to-value/to-value.uvue",
-      "code": "```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>ref count:</text>\r\n      <text id=\"ref-count\">{{ refCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isRef ref count:</text>\r\n      <text id=\"is-ref-ref-count\">{{ isRefRefCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>count:</text>\r\n      <text id=\"count\">{{ count }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isRef count:</text>\r\n      <text id=\"is-ref-count\">{{ isRefCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>obj.num:</text>\r\n      <text id=\"obj-num\">{{ obj.num }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>toValue(() => obj.num):</text>\r\n      <text id=\"to-value-obj-num\">{{ toValueObjNum }}</text>\r\n    </view>\r\n    <button class=\"mt-10\" id=\"increment-btn\" @click=\"increment\">\r\n      increment obj.num\r\n    </button>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst refCount = ref<number>(0);;\r\nconst isRefRefCount = isRef(refCount);\r\nconst count = toValue(refCount);\r\nconst isRefCount = isRef(count);\r\n\r\ntype Obj = {\r\n  num : number\r\n}\r\nconst obj = reactive({\r\n  num: 0\r\n} as Obj)\r\n\r\nlet toValueObjNum = toValue(() : number => obj.num)\r\n\r\nconst increment = () => {\r\n  obj.num++;\r\n  toValueObjNum++;\r\n}\r\n</script>\r\n\n```",
+      "code": "```vue\n<template>\r\n  <view class=\"page\">\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>ref count:</text>\r\n      <text id=\"ref-count\">{{ refCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isRef ref count:</text>\r\n      <text id=\"is-ref-ref-count\">{{ isRefRefCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>count:</text>\r\n      <text id=\"count\">{{ count }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>isRef count:</text>\r\n      <text id=\"is-ref-count\">{{ isRefCount }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>obj.num:</text>\r\n      <text id=\"obj-num\">{{ obj.num }}</text>\r\n    </view>\r\n    <view class=\"flex justify-between flex-row mb-10\">\r\n      <text>toValue(() => obj.num):</text>\r\n      <text id=\"to-value-obj-num\">{{ toValueObjNum }}</text>\r\n    </view>\r\n    <button class=\"mt-10\" id=\"increment-btn\" @click=\"increment\">\r\n      increment obj.num\r\n    </button>\r\n  </view>\r\n</template>\r\n\r\n<script setup lang=\"uts\">\r\nconst refCount = ref<number>(0);;\r\nconst isRefRefCount = isRef(refCount);\r\nconst count = toValue(refCount);\r\nconst isRefCount = isRef(count);\r\n\r\ntype Obj = {\r\n  num : number\r\n}\r\nconst obj = reactive({\r\n  num: 0\r\n} as Obj)\r\n\r\nlet toValueObjNum = toValue(() : number => 0)\r\n\r\nconst increment = () => {\r\n  obj.num++;\r\n  toValueObjNum++;\r\n}\r\n</script>\r\n\n```",
       "webUrl": "https://hellouvue.dcloud.net.cn/#/pages/reactivity/utilities/to-value/to-value"
     },
     "utilities_un-ref_un-ref": {

docs/vue/component.md

@@ -463,17 +463,17 @@ Uni`组件名(驼峰)`Element
 
 ## 作用域插槽的类型 @scoped-slot-type
 
-示例 [详情](<!-- VUEJSON.E_built-in.component_slots_child-options.gitUrl -->)
+示例 [详情](<!-- VUEJSON.E_built-in.special-elements_slots_child-options.gitUrl -->)
 
 作用域插槽需在组件中指定插槽数据类型
-::: preview <!-- VUEJSON.E_built-in.component_slots_child-options.webUrl -->
+::: preview <!-- VUEJSON.E_built-in.special-elements_slots_child-options.webUrl -->
 > 选项式 API
 
-<!-- VUEJSON.E_built-in.component_slots_child-options.code -->
+<!-- VUEJSON.E_built-in.special-elements_slots_child-options.code -->
 
 > 组合式 API
 
-<!-- VUEJSON.E_built-in.component_slots_child-composition.code -->
+<!-- VUEJSON.E_built-in.special-elements_slots_child-composition.code -->
 
 :::
 

docs/vue/data-bind.md

@@ -70,15 +70,15 @@
 - `v-if`、`v-else-if` 或 `v-else`
 - `v-for`
 
-示例 [详情](<!-- VUEJSON.E_built-in.component_template_template-options.gitUrl -->)
+示例 [详情](<!-- VUEJSON.E_built-in.special-elements_template_template-options.gitUrl -->)
 
-::: preview <!-- VUEJSON.E_built-in.component_template_template-options.webUrl -->
+::: preview <!-- VUEJSON.E_built-in.special-elements_template_template-options.webUrl -->
 
 > 选项式 API
-<!-- VUEJSON.E_built-in.component_template_template-options.code -->
+<!-- VUEJSON.E_built-in.special-elements_template_template-options.code -->
 
 > 组合式 API
-<!-- VUEJSON.E_built-in.component_template_template-composition.code -->
+<!-- VUEJSON.E_built-in.special-elements_template_template-composition.code -->
 :::
 
 ### 在样式里绑定 @v-bind-css-data

docs/vue/options-api.md

@@ -86,10 +86,10 @@
 
 用于声明组件的字符串模板。
 
-示例 [详情](<!-- VUEJSON.E_built-in.component_template_template-options.gitUrl -->)
+示例 [详情](<!-- VUEJSON.E_built-in.special-elements_template_template-options.gitUrl -->)
 
-::: preview <!-- VUEJSON.E_built-in.component_template_template-options.webUrl -->
-<!-- VUEJSON.E_built-in.component_template_template-options.code -->
+::: preview <!-- VUEJSON.E_built-in.special-elements_template_template-options.webUrl -->
+<!-- VUEJSON.E_built-in.special-elements_template_template-options.code -->
 :::
 
 #### render