组件名称

src/App.vue

@@ -2,15 +2,14 @@
   import {useRouter} from 'vue-router'
   
   const {push}=useRouter()
-
-  function to(e){
-    push({name:'demo'})
-  }
 </script>
 
 <template>
-  <div @click="to">demo</div>
+  <router-view v-slot="{Component}">
-  <router-view />
+    <keep-alive :include="['dhome','ddd']">
+      <component :is="Component" :key="$route.path"/>
+    </keep-alive>
+  </router-view>
 </template>
 
 <style>

src/components/HelloWorld.vue

@@ -1,54 +1,90 @@
-<script setup>
+<style lang='less' scoped>
-  import { ref, useAttrs, useSlots, useCssVars, inject, defineExpose, onMounted } from 'vue'
+a {
-  
+  color: #42b983;
-  console.log(inject("store"),'---------------store--------')
+  background: v-bind(color);
-  console.log(useAttrs(),'-------useAttrs-------')
+}
-  
+  .demo{
-  console.log(useSlots(),'---------useSlots--')
+    color:blue;
-  defineProps({
+    span{
-    msg: String
+      font-weight: bold;
-  })
+      text-decoration: initial;
-  useCssVars(e=>{
+      font-size:40px;
-    console.log(e,"-----------ctx----")
+    }
-  })
+  }
-  const emit=defineEmits(['close'])
+</style>
-  console.log(emit,'-------emit-----------')
+<style lang="less" module="cssName">
-  const count = ref(0)
+  .demo{
-  const color="#342e91"
+    color:red;
-  defineExpose({ // 暴露数据，提供父元素使用
+    span{
-    count
+      font-weight: bold;
-  })
+      text-decoration: initial;
-</script>
+      font-size:40px;
-
+    }
+  }
+</style>
 <template>
   <h1 v-bind="$attrs">{{ msg }}</h1>
   <slot/>
   <slot name="demo"/>
-  <p>
+  <p v-my-directive>
     Recommended IDE setup:
     <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
     +
     <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
   </p>
-
+  <!-- v-memo 类似于 v-one 数组内的值变换时会更新 -->
-  <p>
+  <p v-memo="[b]">
+    {{count}}
     <a href="https://vitejs.dev/guide/features.html" target="_blank">
       Vite Documentation
     </a>
     |
     <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
   </p>
-
+  <div class="demo">1-<span>2</span></div>
   <button type="button" @click="count++">count is: {{ count }}</button>
-  <p>
+  <p :class="cssName.demo">
-    Edit
+    <span>Edit</span>{{foo}}
     <code>components/HelloWorld.vue</code> to test hot module replacement.
   </p>
 </template>
+<script setup>
+  import { ref, useAttrs, useSlots, useCssVars, inject, defineExpose } from 'vue'
   
-<style lang='less' scoped>
+  console.log(inject("store"),'---------------store--------')
-a {
+  console.log(useAttrs(),'-------useAttrs-------')
-  color: #42b983;
+  console.log(useSlots(),'---------useSlots--')
-  background: v-bind(color);
+  defineProps({
-}
+    msg: String
-</style>
+  })
+  useCssVars(e=>{
+    console.log(e,"-----------ctx----")
+  })
+  const emit=defineEmits(['close'])
+  console.log(emit,'-------emit-----------')
+  const count = ref(0)
+  const color="#342e91"
+  const b=ref('ddd')
+  window.b=b
+  defineExpose({ // 暴露数据，提供父元素使用
+    count
+  })
+
+  const vMyDirective={
+    // 指令具有一组生命周期钩子：
+    // 在绑定元素的 attribute 或事件监听器被应用之前调用
+    created(el, binding, vnode) {},
+    // 在绑定元素的父组件挂载之前调用
+    beforeMount() {},
+    // 在绑定元素的父组件挂载之后调用
+    mounted() {},
+    // 在包含组件的 VNode 更新之前调用
+    beforeUpdate() {},
+    // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
+    updated() {},
+    // 在绑定元素的父组件卸载之前调用
+    beforeUnmount() {},
+    // 在绑定元素的父组件卸载之后调用
+    unmounted() {}
+  }
+</script>

src/main.js

@@ -4,7 +4,9 @@ import router from './router'
 import store from '@/store'
 console.log(import.meta.env,'--------------import------')
 
-createApp(App)
+var app=createApp(App)
-	.use(router)
+app.use(router)
 	.use(store)
 	.mount('#app')
+
+app.config.globalProperties.foo='===foo====' // 全局配置属性

src/router/index.js

@@ -1,19 +1,21 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import Home from "@/views/home.vue";
+import { defineAsyncComponent, defineComponent } from "vue";
 
+var b=defineAsyncComponent(async()=>await import("@/views/demo.vue").then(v=>({...v.default,name:'ddd'})))
 const routes = [
 	{
 		path: "/",
-		name: "Home",
+		name: "home",
-		component: Home,
+		component: {...Home,name:"dhome"},
 	},
 	{
 		path: "/demo",
 		name: "demo",
-		component: import("@/views/demo.vue"),
+		component: b,
 	},
 ];
-
+window.r=routes
 const router = createRouter({
 	history: createWebHashHistory(),
 	routes,

src/views/Demo.vue

@@ -2,8 +2,13 @@
 
 </style>
 <template>
-	<h1>demo</h1>
+	<h1 @click="$router.go(-1)">demo page</h1>
 </template>
 <script setup>
+import { onActivated } from "vue"
 
+	console.log("---------demo---------setup---------")
+	onActivated(()=>{
+		console.log("------demo-----------activated-------")
+	})
 </script>

src/views/Home.vue

@@ -2,9 +2,10 @@
 
 </style>
 <template>
+  <div @click="$router.push({path:'/demo'})">demo</div>
   <img alt="Vue logo" src="~@/assets/img/logo.png" />
-  <hello-world msg="Hello Vue 3 + Vite" ref="hello" style="color:red;" class="hello">
+  <hello-world v-if="false" msg="Hello Vue 3 + Vite" ref="hello" style="color:red;" class="hello">
-    <div>111</div>
+    <div class="a">111</div>
     <template #demo>
       <div>2222222</div>
     </template>
@@ -13,9 +14,8 @@
 <script setup>
   // import HelloWorld from '@/components/HelloWorld.vue'
   import { defineAsyncComponent, onMounted, ref } from 'vue'
+
   var HelloWorld = defineAsyncComponent(()=>import('@/components/HelloWorld.vue'))
+  console.log("-------------home-------setup-----")
   var hello=ref(null)
-  onMounted(()=>{
-    console.log(hello,'------------------hello----------')
-  })
 </script>