<template>
  <button @click="isShowDemo = !isShowDemo">切换隐藏和显示</button>
  <Demo v-if="isShowDemo" />
</template>

<script>
import { ref } from "@vue/reactivity";
import Demo from "./components/Demo.vue";
export default {
  name: "App",
  components: { Demo },
  setup() {
    let isShowDemo = ref(true);
    return {
      isShowDemo,
    };
  },
};
</script>

<template>
  <h2>当前n值：</h2>
  <button @click="sum++">点我+1</button>
  <hr />
  <h2>当前点击鼠标坐标为:(,)</h2>
</template>

<script>
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
export default {
  name: "Demo",
  setup() {
    let sum = ref(0);
    let point = reactive({
      x: 0,
      y: 0,
    });

    function savePoint(event) {
      point.x = event.pageX;
      point.y = event.pageY;
    }

    onMounted(() => {
      window.addEventListener("click", savePoint);
    });

    onBeforeUnmount(() => {
      window.removeEventListener("click", savePoint);
    });

    return {
      sum,
      point,
    };
  },
};
</script>

<style>
</style>

import { createApp } from 'vue'
import App from './App.vue'

// createApp 的更轻量了
createApp(App).mount('#app')

<template>
  <button @click="isShowDemo = !isShowDemo">切换隐藏和显示</button>
  <Demo v-if="isShowDemo" />
  <hr />
  <Test />
</template>

<script>
import { ref } from "@vue/reactivity";
import Demo from "./components/Demo.vue";
import Test from "./components/Test.vue";
export default {
  name: "App",
  components: { Demo, Test },
  setup() {
    let isShowDemo = ref(true);
    return {
      isShowDemo,
    };
  },
};
</script>

<template>
  <h2>当前n值：{{ sum }}</h2>
  <button @click="sum++">点我+1</button>
  <hr />
  <h2>当前点击鼠标坐标为:({{ point.x }},{{ point.y }})</h2>
</template>

<script>
import { ref } from "vue";
import usePoint from "../hooks/usePoint";
export default {
  name: "Demo",
  setup() {
    let sum = ref(0);
    let point = usePoint();

    return {
      sum,
      point,
    };
  },
};
</script>

<style>
</style>