vue3

20.vue3/project1/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "sass": "^1.100.0",
     "sass-loader": "^17.0.0",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue": "^3.5.32"
   },
   "devDependencies": {

20.vue3/project1/src/App.vue

@@ -3,7 +3,7 @@
     <h1>App</h1>
     <hr>
     <hr>
-    <Demo20></Demo20>
+    <A></A>
     <!-- <Demo17 ref="dom1"></Demo17> -->
     <!-- <button @click="changeMain">获取</button> -->
     <!-- <Demo16 v-if="isShow"></Demo16> -->
@@ -46,7 +46,7 @@
 // import Demo9 from './components/Demo9.vue'
 // import Demo16 from './components/Demo16.vue';
 // import Demo17 from './components/Demo17.vue';
-import Demo20 from './components/Demo20.vue';
+import A from './components/A.vue';
 import { ref } from 'vue';
 let isShow = ref(true);
 let dom1 = ref();

20.vue3/project1/src/components/A.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>Demo21:Hook--useMouse</h1>
+    <h1>X轴:{{ x }}</h1>
+    <h1>Y轴:{{ y }}</h1>
+  </div>
+</template>
+
+<script lang="ts" setup name="News">
+import { useMouse } from '@/hooks/useMouse';
+let {x,y} = useMouse();
+</script>
+
+<style lang="scss" scoped>
+</style>

20.vue3/project1/src/components/Demo1.vue

@@ -7,11 +7,16 @@
 
 <script>
 export default{
+  // name:"AAa",
     data() {
         return {
             msg:'你好'
         }
-    }
+    },
+    // setup() {
+    //   let xxx= ref('1')
+    //   return {xxx}
+    // }
 }
 
 </script>

20.vue3/project1/src/components/Demo13.vue

@@ -1,11 +1,10 @@
 <template>
   <div>
     <h1>watch:ref/reactive引用数据类型中的属性</h1>
-    <h2>我有{{ flower.num }}朵{{flower.type}}花--新的:{{ flower.aaa.b }}-- {{ flower.aaa.c }}</h2>
+    <h2>我有{{ flower.num }}朵{{flower.type}}花</h2>
     <button @click="changeNum">减少数量</button>
     <button @click="changeFlower">修改全部</button>
     <button @click="changeType">修改品类</button>
-    <button @click="changeC">修改C</button>
   </div>
 </template>
 
@@ -14,10 +13,7 @@ import {ref, watch} from "vue"
 let flower = ref({
   type:"牡丹",
   num: 10,
-  aaa:{
-    b:12,
-    c: 90
-  }
+  aaa:{}
 });
 function changeFlower() {
     Object.assign(flower.value,{
@@ -28,9 +24,6 @@ function changeFlower() {
 const changeNum = () => {
   flower.value.num--;
 }
-const changeC = () => {
-  flower.value.aaa.c--;
-}
 const changeType = () => {
   flower.value.type = '丁香'
 }

20.vue3/project1/src/components/Demo19.vue

@@ -14,6 +14,7 @@ interface aa  {
 }
 
 type bb = aa[];
+
 let list:bb = reactive([{
     name: '图图',
     age: 3

20.vue3/project1/src/hooks/useMouse.ts

@@ -0,0 +1,20 @@
+
+import { ref, onMounted, onUnmounted } from "vue";
+
+export function useMouse() {
+    let x = ref<number>(0);
+    let y = ref<number>(0);
+    onMounted(() => {
+        window.addEventListener("mousemove", changeMouse);
+    });
+
+    const changeMouse = (event: MouseEvent): void => {
+        x.value = event.clientX;
+        y.value = event.clientY;
+    };
+
+    onUnmounted(() => {
+        window.removeEventListener("mousemove", changeMouse);
+    })
+    return {x,y}
+}

20.vue3/project1/vite.config.ts

@@ -3,12 +3,13 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
-
+import vueSetupExtend from 'vite-plugin-vue-setup-extend'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     vueDevTools(),
+    vueSetupExtend()
   ],
   resolve: {
     alias: {