更新

src/components/NavHeader.vue

@@ -32,13 +32,21 @@ export default {
             path: '/'
         },
         {
-            title: 'About',
-            path: '/about'
+            title: 'watch',
+            path: '/watch'
         },
         {
-            title: 'Test',
-            path: '/test'
+            title: 'computed',
+            path: '/computed'
         },
+        {
+            title: 'lifeCycle',
+            path: '/lifeCycle'
+        },
+        // {
+        //     title: 'Test',
+        //     path: '/test'
+        // },
         {
             title: 'UseExample',
             path: '/use-example'

src/router/index.js

@@ -1,19 +1,26 @@
 import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
-import Home from '../views/Home.vue';
 
 const routes = [
   {
     path: '/',
     name: 'Home',
-    component: Home,
+    component: import(/* webpackChunkName: "about" */ '@/views/home.vue'),
   },
   {
-    path: '/about',
-    name: 'About',
+    path: '/computed',
+    name: 'Computed',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue'),
+    component: () => import(/* webpackChunkName: "about" */ '@/views/computed.vue'),
+  },
+  {
+    path: '/watch',
+    name: 'watch',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '@/views/watch.vue'),
   },
   {
     path: '/test',
@@ -24,6 +31,15 @@ const routes = [
     component: () => import(/* webpackChunkName: "about" */ '@/views/Test.vue'),
   },
 
+  {
+    path: '/lifeCycle',
+    name: 'LifeCycle',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '@/views/lifeCycle.vue'),
+  },
+
   // 用于演示use 拆分业务composition api   
   {
     path: '/use-example',

src/views/Home.vue

@@ -1,13 +1,62 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
+
+    <div class="content">reactiveParams.test：{{ reactiveParams.test }}</div>
+
+    <div class="content">test：{{ test }}</div>
+
+    <div class="content">toRefsReactiveParams：{{ toRefTest }}</div>
+
+    <button class="content" @click="changeReactiveParams">changeReactiveParams to 3</button>
+
+
+    <section>
+      <div>{{ objName }}</div>
+      <button @click="handelClick">按钮</button>
+    </section>
   </div>
 </template>
 
 <script>
+import { reactive, toRefs, toRef } from 'vue'
 
 export default {
-  name: 'Home',
+  name: 'home',
+  setup() {
+    const reactiveParams = reactive({
+      test: 1,
+      test2: 2
+    })
 
+    const toRefsReactiveParams = reactive({
+      toRefTest: 1,
+      toRefTest2: 2
+    })
+
+    const changeReactiveParams = _ => {
+      reactiveParams.test = 3
+      toRefsReactiveParams.toRefTest = 3
+    }
+
+    console.log('reactiveParams', reactiveParams)
+
+    console.log('toRefs reactiveParams', { ...toRefs(reactiveParams) })
+
+    console.log({...reactiveParams})
+    
+    return {
+      ...reactiveParams,
+      ...toRefs(toRefsReactiveParams),
+      reactiveParams,
+      changeReactiveParams
+    }
+  }
 };
 </script>
+
+<style lang="scss" scoped>
+.content {
+  margin: 10px 0 0;
+}
+</style>
+

src/views/computed.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="about">
+    <h1>This is an computed page</h1>
+
+    <section class="section-input">
+      <span>FirstName：</span>
+      <input type="text" v-model="firstName" />
+    </section>
+
+
+    <section class="section-input">
+      <span>LastName：</span>
+      <input type="text" v-model="lastName" />
+    </section>
+
+    <section class="section-display">
+      fullName：{{ fullName }}
+    </section>
+
+    <section class="section-change">
+      <button @click="changeFullName">变化姓名</button>
+    </section>
+  </div>
+</template>
+
+<script>
+import { computed, toRefs, reactive } from 'vue'
+
+export default {
+
+  setup() {
+    let state = reactive({
+      firstName: '',
+      lastName: '',
+      count: 0
+    })
+
+    let fullName = computed({
+      get: () => `${state.firstName} ${state.lastName}`,
+      set: (value) => {
+        console.log(value)
+        let result = value.split(' ')
+        state.firstName = result[0]
+        state.lastName = result[1]
+      }
+    })
+
+    let changeFullName = _ => {
+      fullName = 'john tan'
+    }
+
+    return {
+      ...toRefs(state),
+      fullName,
+      changeFullName
+    }
+  }
+}
+</script>

src/views/lifeCycle.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="home">
+    <img alt="Vue logo" src="../assets/logo.png">
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'lifeCycle',
+  setup() {
+    
+  }
+};
+</script>

src/views/use-example.vue

@@ -8,31 +8,34 @@
 -->
 <template>
 	<div class="use-example">
-        <section class="mousemove"> x：{{ x }} y： {{ y }}</section>
+    <section class="mousemove"> x：{{ x }} y： {{ y }}</section>
 
-        <section class="timer">tiemr: {{ time }}</section>
+    <section class="timer">tiemr: {{ time }}</section>
 	</div>
 </template>
 
 <script>
-import { ref, watch, computed, getCurrentInstance } from 'vue'
+import { ref, watch, computed, getCurrentInstance, reactive, toRefs } from 'vue'
 import useTime from '@/use/useTime'
 import useMouse from '@/use/useMouse'
 
 export default {
 	setup(props, context) {
 
-        const { x, y } = useMouse()
+    const { x, y } = useMouse()
 
-        const { time } = useTime('YYYY-MM-DD HH:mm:ss')
+    const { time } = useTime('YYYY-MM-DD HH:mm:ss')
 
-        console.log()
 		return {
-            x,
-            y,
-            time
+      x,
+      y,
+      time
 		}
-	}
+	},
+
+  mounted() {
+    console.log(123)
+  }
 }
 </script>
 

src/views/watch.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="home">
+    <img alt="Vue logo" src="../assets/logo.png">
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'watch',
+
+};
+</script>