01-知识运用案例

实现功能:

• 记录鼠标坐标
  • 定义一个响应式数据对象，包含x和y属性。
  • 在组件渲染完毕后，监听document的鼠标移动事件
  • 指定move函数为事件对应方法，在函数中修改坐标,在控制台打印
  • 在setup返回数据，模版中使用
• 累加功能
  • 定义一个简单数据类型的响应式数据
  • 定义一个修改数字的方法,每次加1
  • 在setup返回数据和函数，模板中使用

// 演示代码
<template>
  <div class="container">
    <p>x坐标:{{x}}</p>
    <p>y坐标:{{y}}</p>
    <div>{{num}} <button @click="add">累加</button></div>
  </div>
</template>
<script>
import {onMounted, onUnmounted, reactive, ref, toRefs} from 'vue'
// 分模块,鼠标移动模块
const mousemove=()=>{
  // 定义鼠标数据
    const mouse=reactive({
      x:0,
      y:0
    })
    // 定义方法
    const move=e=>{
        mouse.x=e.pageX
        mouse.y=e.pageY
      }
    // 挂载后生命钩子
    onMounted(()=>{
      document.addEventListener('mousemove',move)
    })
    // 取消挂载后生命钩子
    onUnmounted(()=>{
      document.removeEventListener('mousemove',move)
    })
    return toRefs(mouse)
}
// 数字累加模块
const numadd=()=>{
  // 定义数据
  const num=ref(0)
  // 定义方法
  const add=()=>{
    num.value++
  }
  return {num,add}
}
export default {
  name: 'App',
  setup(){
    // 鼠标移动模块
    const mouse=mousemove()
    const numdata=numadd()
    return {...mouse,...numdata}
  }
}
</script>

总结：  体会组合API的写法，尝试组织可读性高的代码。