feat:更新

src/views/component/AsyncComponent.vue

@@ -31,15 +31,15 @@ const showAsyncComponent = () => {
 //比较完整的 例子
 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);
-        });
-    },
+    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

src/views/component/KeepAliveComponent.vue

@@ -0,0 +1,62 @@
+<template>
+    <div>
+        <div>
+            <button v-for="(item, index) in components" :key="`${item.name}_${index}`" @click="clickButton(index)">按钮{{ index
+                + 1 }}</button>
+        </div>
+        <br />
+        <KeepAlive :include="cacheList">
+            <component :is="renderComponent" />
+        </KeepAlive>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import ComputedBase from "@/views/computed/ComputedBase.vue";
+import ComputedAdvan from "@/views/computed/ComputedAdvan.vue";
+import WatchReactive from "@/views/watch/WatchReactive.vue";
+
+const components = [
+    {
+        name: ComputedBase.name || ComputedBase.__name,
+        component: ComputedBase,
+        cache: true
+    },
+    {
+        name: ComputedAdvan.name || ComputedAdvan.__name,
+        component: ComputedAdvan,
+        cache: false
+    },
+    {
+        name: WatchReactive.name || WatchReactive.__name,
+        component: WatchReactive,
+        cache: true
+    }
+];
+
+const cacheList = computed(() => {
+    const arr: Array<string> = [];
+    for (let index = 0; index < components.length; index++) {
+        const element = components[index];
+        if (element.cache && element.name) arr.push(element.name);
+    }
+    return arr;
+});
+
+const activeButton = ref(0);
+const clickButton = (index: number) => {
+    activeButton.value = index;
+};
+
+const renderComponent = computed(() => {
+   return components[activeButton.value].component;
+});
+
+</script>
+
+<style scoped lang="less">
+button {
+    padding: 8px;
+}
+</style>

src/views/computed/ComputedAdvan.vue

@@ -6,18 +6,18 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref } from "vue";
 
-const firstName = ref("张")
-const secondName = ref("三")
+const firstName = ref("张");
+const secondName = ref("三");
 const fullName = computed({
     get: () => {
-        return `${firstName.value}${secondName.value}`
+        return `${firstName.value}${secondName.value}`;
     },
     set: (value) => {
-        secondName.value = value
+        secondName.value = value;
     }
-})
+});
 
 </script>
 

src/views/computed/ComputedBase.vue

@@ -7,6 +7,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
+
 const number = ref(123456);
 const amount = computed(() => {
     return number.value.toLocaleString("zh", {

src/views/emit/EmitChildren1.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <p>
+            <button @click="onClick">事件1</button>
+        </p>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+const emit = defineEmits(["changeValue"]);
+const onClick = () => {
+    emit("changeValue", "张三");
+};
+
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/emit/EmitChildren2.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <p>
+            <button @click="onClick">事件2</button>
+        </p>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+const emit = defineEmits<{
+  (e: "updateId", id: number): void
+}>();
+const onClick = () => {
+    emit("updateId", 123456789);
+};
+
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/emit/EmitChildren3.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <p>
+            <button @click="onClick">事件3</button>
+        </p>
+    </div>
+</template>
+
+<script setup lang="ts">
+// 3.3+: 更简洁的语法
+const emit = defineEmits<{
+  selectValue: [list: Array<string>]
+}>();
+const onClick = () => {
+    emit("selectValue", ["abc","111", "李四"]);
+};
+
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/emit/EmitParent.vue

@@ -0,0 +1,52 @@
+<template>
+    <div>
+        <p>
+            <EmitChildren1 @change-value="onChange1"/>
+        </p>
+        <h1>{{ value1 }}</h1>
+        <br />
+        <p>
+            <EmitChildren2 @update-id="onChange2" />
+        </p>
+        <h1>{{ value2 }}</h1>
+        <br />
+        <p>
+            <EmitChildren3 @select-value="onChange3" />
+        </p>
+        <h1>{{ value3 }}</h1>
+        <br />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import EmitChildren1 from "./EmitChildren1.vue";
+import EmitChildren2 from "./EmitChildren2.vue";
+import EmitChildren3 from "./EmitChildren3.vue";
+
+const value1 = ref("");
+const onChange1 = (val:string) => {
+    value1.value = val;
+};
+
+
+
+const value2 = ref(0);
+const onChange2 = (val:number) => {
+    value2.value = val;
+};
+
+
+
+const value3 = ref<Array<string>>([""]);
+const onChange3 = (val: string[]) => {
+    value3.value = val;
+};
+
+</script>
+
+<style scoped lang="less">
+button {
+    padding: 8px;
+}
+</style>

src/views/error/NoAccess.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  text?: string;
+}>();
+
+const noPower = new URL("../../assets/meme_woman_yelling.svg", import.meta.url).href;
+
+</script>
+
+<template>
+  <div class="no-access">
+    <div class="no-access-image">
+      <img :src="noPower" />
+    </div>
+    <div class="no-access-text">
+      <p>{{ props.text || "你没有访问权限" }}</p>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.no-access {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  &-image {
+    width: 200px;
+    height: 200px;
+
+    &>img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &-text {
+    margin-top: 16px;
+    line-height: 26px;
+    color: #888;
+    font-size: 16px;
+  }
+
+  &-btn {
+    margin-top: 20px;
+    width: 180px;
+    display: flex;
+    justify-content: space-between;
+
+    &-class {
+      width: 80px;
+      font-size: 16px;
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/views/pinia/PiniaUserInfo.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        {{ user.info }}
+    </div>
+</template>
+
+<script setup lang="ts">
+import pinia from "@/stores/pinia";
+import { userInfoStore } from "@/stores";
+
+const user = userInfoStore(pinia);
+
+user.getUserRequest();
+
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/provideInject/InjectBase.vue

@@ -0,0 +1,30 @@
+<template>
+    <div>
+        <p>
+            <button @click="clickHander">点击</button>
+        </p>
+        <br />
+        <p>inject组件：{{ num }}</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from "vue";
+
+const num = inject("num");
+
+const clickHander = () => {
+    num.value++;
+};
+</script>
+
+
+<style scoped lang="less">
+div {
+    border: 3px solid #aaa;
+    padding:10px;
+}
+button {
+    padding: 8px;
+}
+</style>

src/views/provideInject/ProvideBase.vue

@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <p>
+            <button @click="clickHander">点击</button>
+        </p>
+        <br />
+        <p>provide组件： {{ count }}</p>
+        <br />
+        <InjectBase />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, provide } from "vue";
+import InjectBase from "./InjectBase.vue";
+
+
+const count = ref(0);
+provide("num", count);
+
+const clickHander = () => {
+    count.value++;
+};
+</script>
+
+
+<style scoped lang="less">
+button {
+    padding: 8px;
+}
+</style>

src/views/provideInject/ProvideReadonly.vue

@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <p>
+            <button @click="clickHander">点击</button>
+        </p>
+        <br />
+        <p>provide组件： {{ count }}</p>
+        <br />
+        <InjectBase />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, provide, readonly } from "vue";
+import InjectBase from "./InjectBase.vue";
+
+
+const count = ref(0);
+provide("num", readonly(count));
+
+const clickHander = () => {
+    count.value++;
+};
+</script>
+
+
+<style scoped lang="less">
+button {
+    padding: 8px;
+}
+</style>

src/views/reactivity/ReactiveBase.vue

@@ -11,10 +11,10 @@
 
 <script setup lang="ts">
 import { reactive } from "vue";
-const person = reactive({ name: "张三", age: 18 })
+const person = reactive({ name: "张三", age: 18 });
 const clickHander = () => {
-    person.age++
-}
+    person.age++;
+};
 // let { age } = person;
 // const clickHander2 = () => {
 //     age++;

src/views/router/RouterGuard.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        你已经通过了导航守卫
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/slot/DefaultParentSlot.vue

@@ -0,0 +1,16 @@
+<template>
+    <div>
+        <DefaultSlot>
+            <h1>这是一个匿名插槽</h1>
+        </DefaultSlot>
+    </div>
+</template>
+
+<script setup lang="ts">
+import DefaultSlot from "./DefaultSlot.vue";
+
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/slot/DefaultSlot.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>
+        <slot></slot>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/slot/NameParentSlot.vue

@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <NameSlot>
+            <template #header>
+                <h1>我是header</h1>
+            </template>
+            <template #main>
+                <main>我是main</main>
+            </template>
+            <template #footer>
+                <footer>我是footer</footer>
+            </template>
+        </NameSlot>
+    </div>
+</template>
+
+<script setup lang="ts">
+import NameSlot from "./NameSlot.vue";
+
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/slot/NameSlot.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        <slot name="header"></slot>
+        <slot name="main"></slot>
+        <slot name="footer"></slot>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/slot/ScopeParentSlot.vue

@@ -0,0 +1,48 @@
+<template>
+    <div>
+        <ScopeSlot :data="students"></ScopeSlot>
+        <br />
+        <!-- <ScopeSlot :data="students">
+            <template #default="{ row }">
+                <img :src="sexPic(row)" >
+            </template>
+        </ScopeSlot> -->
+    </div>
+</template>
+
+<script setup lang="ts">
+import ScopeSlot from "./ScopeSlot.vue";
+interface student {
+    name: string,
+    age: number,
+    sex: 0 | 1
+}
+const students: student[] = [
+    {
+        name: "小明",
+        age: 10,
+        sex: 1
+    },
+    {
+        name: "小红",
+        age: 11,
+        sex: 0
+    },
+    {
+        name: "小刚",
+        age: 9,
+        sex: 1
+    }
+];
+
+const girl = new URL("../../assets/meme_crying_kim_kardashian.svg", import.meta.url);
+const boy = new URL("../../assets/meme_crying_michael_jordan.svg", import.meta.url);
+const sexPic = (item: student) => {
+    const { sex } = item;
+    return sex ? boy : girl;
+};
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/slot/ScopeSlot.vue

@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <table border="1">
+            <thead>
+                <tr>
+                    <th>姓名</th>
+                    <th>年龄</th>
+                    <th>性别</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="(item, index) in props.data" :key="index">
+                    <td>{{ item.name }}</td>
+                    <td>{{ item.age }}</td>
+                    <td>
+                        <template v-if="slots.default">
+                           <slot :row="item"></slot>
+                        </template>
+                        <template v-else>
+                            {{ item.sex }}
+                        </template>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useSlots } from "vue";
+
+interface student {
+    name: string,
+    age: number,
+    sex: 0 | 1
+}
+
+interface propsType {
+    data: Array<student> | []
+}
+
+const props = withDefaults(defineProps<propsType>(), {
+    data: () => []
+});
+
+const slots = useSlots();
+</script>
+
+<style scoped lang="less"></style>

src/views/slot/VarParentSlot.vue

@@ -0,0 +1,35 @@
+<template>
+    <div>
+        <div>
+            <select name="select" v-model="name">
+                <option v-for="(item, index) in options" :key="index" :value="item">{{ item }}</option>
+            </select>
+        </div>
+        <br />
+        <VarSlot>
+            <template #[name]>
+                <div>{{name}}</div>
+            </template>
+        </VarSlot>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import VarSlot from "./VarSlot.vue";
+
+const options = [
+    "header",
+    "main",
+    "footer"
+];
+
+const name = ref("header");
+</script>
+
+<style scoped lang="less">
+select {
+    height: 30px;
+    padding: 0 8px;
+}
+</style>

src/views/slot/VarSlot.vue

@@ -0,0 +1,14 @@
+<template>
+    <div>
+        <slot name="header"></slot>
+        <slot name="main"></slot>
+        <slot name="footer"></slot>
+    </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/watch/WatchBase.vue

@@ -5,12 +5,13 @@
                 <option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
             </select>
         </p>
+        <br />
         <p>{{ res }}</p>
     </div>
 </template>
 
 <script setup lang="ts">
-import { watch, ref } from 'vue'
+import { watch, ref } from "vue";
 const options = [
     {
         label: "第一页",
@@ -32,17 +33,17 @@ const options = [
         label: "第五页",
         value: 5
     }
-]
-const curPage = ref(1)
-const res = ref("")
+];
+const curPage = ref(1);
+const res = ref("");
 watch(
     curPage,
     (newValue) => {
-        const curItem = options.filter((item) => item.value === newValue)[0]
-        res.value = `${curItem.label} 的数据`
-    },
+        const curItem = options.filter((item) => item.value === newValue)[0];
+        res.value = `${curItem.label} 的数据`;
+    }
     // {immediate: true}
-)
+);
 
 </script>
 

src/views/watch/WatchCallback.vue

@@ -16,19 +16,19 @@
 <script setup lang="ts">
 import { 
     ref,
-    watchEffect, 
+    watchEffect 
     // watchPostEffect
-} from 'vue'
-const listDom = ref<HTMLDivElement>()
-const resDom = ref<HTMLDivElement>()
-const selectElement = ref(3)
+} from "vue";
+const listDom = ref<HTMLDivElement>();
+const resDom = ref<HTMLDivElement>();
+const selectElement = ref(3);
 
 watchEffect(() => {
-    const selectElem = listDom.value.querySelectorAll("p")[selectElement.value]
-    resDom.value.append(selectElem)
+    const selectElem = listDom?.value?.querySelectorAll("p")[selectElement.value];
+    if(selectElem) resDom?.value?.append(selectElem);
 }, {
-    flush: 'post'
-})
+    flush: "post"
+});
 
 // watchPostEffect(() => {
 //     const selectElem = listDom.value.querySelectorAll("p")[selectElement.value]

src/views/watch/WatchEffectBase.vue

@@ -5,13 +5,15 @@
                 <option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
             </select>
         </p>
+        <br />
         <p>watch: {{ watchRes }}</p>
+        <br />
         <p>watchEffect: {{ watchEffectRes }}</p>
     </div>
 </template>
 
 <script setup lang="ts">
-import { watch, watchEffect, ref } from 'vue'
+import { watch, watchEffect, ref } from "vue";
 const options = [
     {
         label: "第一页",
@@ -33,21 +35,21 @@ const options = [
         label: "第五页",
         value: 5
     }
-]
-const curPage = ref(1)
-const watchRes = ref("")
+];
+const curPage = ref(1);
+const watchRes = ref("");
 watch(
     curPage,
     (newValue) => {
-        const curItem = options.filter((item) => item.value === newValue)[0]
-        watchRes.value = `${curItem.label} 的数据`
-    },
-)
-const watchEffectRes = ref("")
+        const curItem = options.filter((item) => item.value === newValue)[0];
+        watchRes.value = `${curItem.label} 的数据`;
+    }
+);
+const watchEffectRes = ref("");
 watchEffect(() => {
-    const curItem = options.filter((item) => item.value === curPage.value)[0]
-    watchEffectRes.value = `${curItem.label} 的数据`
-})
+    const curItem = options.filter((item) => item.value === curPage.value)[0];
+    watchEffectRes.value = `${curItem.label} 的数据`;
+});
 
 </script>
 

src/views/watch/WatchEffectInvalidate.vue

@@ -5,12 +5,13 @@
                 <option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
             </select>
         </p>
+        <br />
         <p>{{ watchEffectRes }}</p>
     </div>
 </template>
 
 <script setup lang="ts">
-import { watchEffect, ref } from 'vue'
+import { watchEffect, ref } from "vue";
 const options = [
     {
         label: "第一页",
@@ -32,17 +33,17 @@ const options = [
         label: "第五页",
         value: 5
     }
-]
-const curPage = ref(1)
-const watchEffectRes = ref("")
+];
+const curPage = ref(1);
+const watchEffectRes = ref("");
 watchEffect((onInvalidate) => {
-    const curItem = options.filter((item) => item.value === curPage.value)[0]
-    watchEffectRes.value = `${curItem.label} 的数据`
-    console.log('watchEffect副作用函数执行了！')
+    const curItem = options.filter((item) => item.value === curPage.value)[0];
+    watchEffectRes.value = `${curItem.label} 的数据`;
+    console.log("watchEffect副作用函数执行了！");
     onInvalidate(() => {
-        console.log("onInvalidate清除副作用函数执行了！")
-    })
-})
+        console.log("onInvalidate清除副作用函数执行了！");
+    });
+});
 
 
 

src/views/watch/WatchReactive.vue

@@ -6,12 +6,13 @@
             </select>
             <!-- <input type="number" v-model="curPage.limit" />  -->
         </p>
+        <br />
         <p>{{ res }}</p>
     </div>
 </template>
 
 <script setup lang="ts">
-import { watch, reactive, ref } from 'vue'
+import { watch, reactive, ref } from "vue";
 const options = [
     {
         label: "第一页",
@@ -33,23 +34,23 @@ const options = [
         label: "第五页",
         value: 5
     }
-]
+];
 const curPage = reactive({
     page: 1,
     limit: 10
-})
-const res = ref("")
+});
+const res = ref("");
 watch(
     // curPage.page,
     () => curPage.page,
     (newValue) => {
-        const curItem = options.filter((item) => item.value === newValue)[0]
-        res.value = `${curItem.label} 的数据`
+        const curItem = options.filter((item) => item.value === newValue)[0];
+        res.value = `${curItem.label} 的数据`;
     },
     {
         immediate: true
     }
-)
+);
 
 // watch(
 //     () => curPage,

src/views/watch/WatchStop.vue

@@ -6,12 +6,13 @@
             </select>
             <button @click="watchStop">停止侦听</button>
         </p>
+        <br />
         <p>{{ res }}</p>
     </div>
 </template>
 
 <script setup lang="ts">
-import { watch, ref } from 'vue'
+import { watch, ref } from "vue";
 const options = [
     {
         label: "第一页",
@@ -33,20 +34,20 @@ const options = [
         label: "第五页",
         value: 5
     }
-]
-const curPage = ref(1)
-const res = ref("")
+];
+const curPage = ref(1);
+const res = ref("");
 const stop = watch(
     curPage,
     (newValue) => {
-        const curItem = options.filter((item) => item.value === newValue)[0]
-        res.value = `${curItem.label} 的数据`
+        const curItem = options.filter((item) => item.value === newValue)[0];
+        res.value = `${curItem.label} 的数据`;
     }
-)
+);
 
 const watchStop = () => {
-    stop()
-}
+    stop();
+};