vue.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>和源码做验证</title>
    <script src="https://unpkg.com/vue@3"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <my-component></my-component>
      </div>
    </div>
    <script>
      const { h, ref, computed, watch, onMounted, onUnmounted } = Vue

      const mousePosition = {
        template: `
          <slot :position="position"></slot>
        `,
        setup(props, { slots }) {
          const position = ref({ x: 0, y: 0 })
          function onMouseMoveHandle({ pageX, pageY }) {
            position.value.x = pageX
            position.value.y = pageY - window.scrollY.toFixed(0)
          }
          onMounted(() => {
            document.addEventListener('mousemove', onMouseMoveHandle)
          })
          onUnmounted(() => {
            document.removeEventListener('mousemove', onMouseMoveHandle)
          })
          return {
            position,
          }
        },
      }
      const myComponent = {
        template: `<div>{{sum}}</div>`,

        computed: {
          sum() {
            return 2
          },
        },
      }

      const app = Vue.createApp({
        components: { myComponent },
      })

      app.mount('#app')
    </script>
  </body>
</html>