ref和reactive组合式API应用

1.鼠标移动事件

        指定move函数为事件对应方法 在函数中华修改坐标

        在setup返回数据，模板中使用

2.累加功能

        定义一个简单数据类型的响应式数据

        定义一个修改数字的方法

        

<template>
  <div>
    <div>x:{{ x }}</div>
    <div>y:{{ y }}</div>
    <button @click="add">累加1</button>
    <div>{{ count }}</div>
  </div>
</template>

<script>
import { onMounted, onUnmounted, reactive, ref, toRef, toRefs } from 'vue'
// 方法
const useMouse = () => {
  const mouse = reactive({
    x: 0,
    y: 0
  })
  // 1.3修改响应式数据
  const move = (e) => {

    mouse.x = e.pageX
    mouse.y = e.pageY
  }
  // 12等dom渲染完毕去监听
  onMounted(() => {
    document.addEventListener('mousemove', move)
  })
  // 1.4组件消耗，删除事件
  onUnmounted(() => {
    document.removeEventListener('mousemove', move)
  })
  return mouse
}
export default {
  name: 'App',
  setup () {
    const mouse = useMouse()
    //  1.记录鼠标坐标
    // 1.1申明一个响应式数据
    // const mouse = reactive({
    //   x: 0,
    //   y: 0
    // })
    // // 1.3修改响应式数据
    // const move = (e) => {

    //   mouse.x = e.pageX
    //   mouse.y = e.pageY
    // }
    // // 12等dom渲染完毕去监听
    // onMounted(() => {
    //   document.addEventListener('mousemove', move)
    // })
    // // 1.4组件消耗，删除事件
    // onUnmounted(() => {
    //   document.removeEventListener('mousemove', move)
    // })

    // 2.数字累加
    const count = ref(0)
    const add = () => {
      count.value++
    }


    return { ...toRefs(mouse), count, add }
  }
}
</script>

<style>
</style>

在setup中返回数据和函数，在模板中使用