feat： 更新

src/views/component/AsyncComponent.vue

@@ -0,0 +1,59 @@
+<template>
+    <div>
+        <div>
+            <ComponentD />
+        </div>
+        <br />
+        <div><button @click.once="showAsyncComponent">点击</button></div>
+        <br />
+        <div v-if="show">
+            <AsyncComp />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+import VLoading from "@/components/VLoading.vue";
+import VError from "@/components/VError.vue";
+
+const ComponentD = defineAsyncComponent(() => import("@/components/ComponentD.vue"));
+
+
+
+
+
+
+const show = ref(false);
+const showAsyncComponent = () => {
+    show.value = true;
+};
+//比较完整的 例子
+const AsyncComp = defineAsyncComponent({
+    // 加载函数
+    // loader: () => import("@/components/async/VAsyncComp1.vue"),
+    loader: () => {
+        // const comp = () => import("../../components/async/VAsyncComp1.vue");
+        return new Promise(resolve => {
+            setTimeout(() => {
+                resolve(() => import("../../components/async/VAsyncComp1.vue"));
+            }, 2000);
+        });
+    },
+    // 加载异步组件时使用的组件
+    loadingComponent: VLoading,
+    // 展示加载组件前的延迟时间，默认为 200ms
+    delay: 200,
+    // 加载失败后展示的组件
+    errorComponent: VError,
+    // 如果提供了一个 timeout 时间限制，并超时了
+    // 也会显示这里配置的报错组件，默认值是：Infinity
+    timeout: 3000
+});
+</script>
+
+<style scoped lang="less">
+button {
+    padding: 8px
+}
+</style>

src/views/component/AsyncVarComponent.vue

@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <p v-for="(item, index) in options" :key="index">
+            <input type="checkbox" :id="item.name" :value="item.name" v-model="item.checked" />
+            <label :for="item.name">{{ item.label }}</label>
+        </p>
+        <br />
+        <div>
+            <template v-for="(component, idx) in renderComponents" :key="idx">
+                <component :is="component" />
+                <br />
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineAsyncComponent } from "vue";
+import VLoading from "@/components/VLoading.vue";
+import VError from "@/components/VError.vue";
+
+const options = ref([
+    {
+        name: "VAsyncComp1",
+        label: "异步组件1",
+        checked: false
+    },
+    {
+        name: "VAsyncComp2",
+        label: "异步组件2",
+        checked: false
+    },
+    {
+        name: "VAsyncComp3",
+        label: "异步组件3",
+        checked: false
+    }
+]);
+
+const ac = (name: string) => {
+    return defineAsyncComponent({
+        loader: () => import(`../../components/async/${name}.vue`),
+        loadingComponent: VLoading,
+        delay: 0,
+        errorComponent: VError,
+        timeout: 3000
+    });
+};
+
+const renderComponents = computed(() => {
+    const arr = [];
+    for (let index = 0; index < options.value.length; index++) {
+        const check = options.value[index].checked;
+        const name = options.value[index].name;
+        if (check) arr.push(ac(name));
+    }
+    return arr;
+});
+</script>
+
+<style scoped lang="less"></style>

src/views/component/PartComponent.vue

@@ -1,11 +1,11 @@
 <template>
     <div>
-        <ComponentC />
+        <ComponentD />
     </div>
 </template>
 
 <script setup lang="ts">
-import ComponentC from "@/components/ComponentC.vue";
+import ComponentD from "@/components/ComponentD.vue";
 </script>
 
 <style scoped lang="less">

src/views/component/RecursionComponent.vue

@@ -0,0 +1,12 @@
+<template>
+    <div style="font-size:100px;">
+        <span>&#128072;</span>
+        <span>请看左侧菜单</span>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="less"></style>

src/views/component/VarComponent.vue

@@ -1,14 +1,14 @@
 <template>
     <div>
-        <component :is="ComponentC" />
+        <component :is="ComponentD" />
+        <br />
         <component :is="ComponentA" />
     </div>
 </template>
 
 <script setup lang="ts">
-import ComponentC from "@/components/ComponentC.vue";
+import ComponentD from "@/components/ComponentD.vue";
 const ComponentA = "ComponentA";
-console.log(ComponentC);
 </script>
 
 <style scoped lang="less">

src/views/component/VarComponentAdvan.vue

@@ -1,13 +1,45 @@
 <template>
     <div>
-
+        <p v-for="(item, index) in options" :key="index">
+            <input type="checkbox" :id="item.name" :value="item.name" v-model="checkList[index]" />
+            <label :for="item.name">{{ item.label }}</label>
+        </p>
+        <br />
+        <div>
+            <template v-for="(name, idx) in renderComponents" :key="`${name}_${idx}`">
+                <component :is="name" />
+                <br />
+            </template>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import { ref, computed } from "vue";
+const options = [
+    {
+        name: "ComponentA",
+        label: "组件A"
+    },
+    {
+        name: "ComponentB",
+        label: "组件B"
+    },
+    {
+        name: "ComponentC",
+        label: "组件C"
+    }
+];
+const checkList = ref([false, false, false]);
 
+const renderComponents = computed(() => {
+    const arr = [];
+    for (let index = 0; index < checkList.value.length; index++) {
+        const check = checkList.value[index];
+        if (check) arr.push(options[index].name);
+    }
+    return arr;
+});
 </script>
 
-<style scoped lang="less">
-
-</style>
+<style scoped lang="less"></style>

src/views/computed/ComputedBase.vue

@@ -6,15 +6,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-const number = ref(123456)
+import { computed, ref } from "vue";
+const number = ref(123456);
 const amount = computed(() => {
-    return number.value.toLocaleString('zh', {
-        style: 'currency',
-        currency: 'CNY',
+    return number.value.toLocaleString("zh", {
+        style: "currency",
+        currency: "CNY",
         minimumFractionDigits: 3
     });
-})
+});
 // amount.value = "11111"
 
 </script>