任丘网站优化南上海网站建设

1.开始

2.基础

3.深入组件

4. 逻辑复用

1. 组合式函数

鼠标跟踪器

• 在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

• 鼠标跟踪器示例，直接使用组合式api实现

  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue'const x = ref(0)
  const y = ref(0)function update(event) {x.value = event.pageXy.value = event.pageY
  }onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  </script><template>Mouse position is at: {{ x }}, {{ y }}</template>
  

• 组合式函数的形式提取到外部文件使用

  // mouse.js
  import { ref, onMounted, onUnmounted } from 'vue'// 按照惯例，组合式函数名以“use”开头
  export function useMouse() {// 被组合式函数封装和管理的状态const x = ref(0)const y = ref(0)// 组合式函数可以随时更改其状态。function update(event) {x.value = event.pageXy.value = event.pageY}// 一个组合式函数也可以挂靠在所属组件的生命周期上// 来启动和卸载副作用onMounted(() => window.addEventListener('mousemove', update))onUnmounted(() => window.removeEventListener('mousemove', update))// 通过返回值暴露所管理的状态return { x, y }
  }
  

  <script setup>
  import { useMouse } from './mouse.js'const { x, y } = useMouse()
  </script><template>Mouse position is at: {{ x }}, {{ y }}</template>
  

  例如还可以继续封装

  // event.js
  import { onMounted, onUnmounted } from 'vue'export function useEventListener(target, event, callback) {// 如果你想的话，// 也可以用字符串形式的 CSS 选择器来寻找目标 DOM 元素onMounted(