vue入门到精通（十）

最新推荐文章于 2024-03-15 17:36:01 发布

zxpmoxo

最新推荐文章于 2024-03-15 17:36:01 发布

阅读量637

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript 开发语言前端框架

本文链接：https://blog.csdn.net/zxpmoxi/article/details/128981618

版权

7.4 约定和最佳实践

7.4.1 命名

组合式函数约定用驼峰命名法命名，并以“use”作为开头。

7.44.2 输入参数

尽管其响应性不依赖 ref，组合式函数仍可接收 ref 参数。如果编写的组合式函数会被其他开发者使用，你最好在处理输入参数时兼容 ref 而不只是原始的值。unref() 工具函数会对此非常有帮助：

import { unref } from 'vue'

function useFeature(maybeRef) {
  // 若 maybeRef 确实是一个 ref，它的 .value 会被返回
  // 否则，maybeRef 会被原样返回
  const value = unref(maybeRef)
}

如果你的组合式函数在接收 ref 为参数时会产生响应式 effect，请确保使用 watch() 显式地监听此 ref，或者在 watchEffect() 中调用 unref() 来进行正确的追踪。

7.4.3 返回值

你可能已经注意到了，我们一直在组合式函数中使用 ref() 而不是 reactive()。我们推荐的约定是组合式函数始终返回一个包含多个 ref 的普通的非响应式对象，这样该对象在组件中被解构为 ref 之后仍可以保持响应性：

// x 和 y 是两个 ref
const { x, y } = useMouse()

从组合式函数返回一个响应式对象会导致在对象解构过程中丢失与组合式函数内状态的响应性连接。与之相反，ref 则可以维持这一响应性连接。

如果你更希望以对象属性的形式来使用组合式函数中返回的状态，你可以将返回的对象用 reactive() 包装一次，这样其中的 ref 会被自动解包，例如：

const mouse = reactive(useMouse())
// mouse.x 链接到了原来的 x ref
console.log(mouse.x)

Mouse position is at: {
  { mouse.x }}, {
  { mouse.y }}

7.4.4 副作用

在组合式函数中的确可以执行副作用 (例如：添加 DOM 事件监听器或者请求数据)，但请注意以下规则：

如果你的应用用到了服务端渲染 (SSR)，请确保在组件挂载后才调用的生命周期钩子中执行 DOM 相关的副作用，例如：onMounted()。这些钩子仅会在浏览器中被调用，因此可以确保能访问到 DOM。
确保在 onUnmounted() 时清理副作用。举例来说，如果一个组合式函数设置了一个事件监听器，它就应该在 onUnmounted() 中被移除 (就像我们在 useMouse() 示例中看到的一样)。当然也可以像之前的 useEventListener() 示例那样，使用一个组合式函数来自动帮你做这些事。

7.4.5 使用限制

组合式函数在 <script setup> 或 setup() 钩子中，应始终被同步地调用。在某些场景下，你也可以在像 onMounted() 这样的生命周期钩子中使用他们。

这个限制是为了让 Vue 能够确定当前正在被执行的到底是哪个组件实例，只有能确认当前组件实例，才能够：

将生命周期钩子注册到该组件实例上
将计算属性和监听器注册到该组件实例上，以便在该组件被卸载时停止监听，避免内存泄漏。
常需要复用公共任务的逻辑。例如为了在不同地方格式化时间，我们可能会抽取一个可复用的日期格式化函数。这个函数封装了无状态的逻辑：它在接收一些输入后立刻返回所期望的输出。

相比之下，有状态逻辑负责管理会随时间而变化的状态。一个简单的例子是跟踪当前鼠标在页面中的位置。在实际应用中，也可能是像触摸手势或与数据库的连接状态这样的更复杂的逻辑。

如果我们要直接在组件中使用组合式 API 实现鼠标跟踪功能，它会是这样的

18_composition/90_composition_mouse.html

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>鼠标跟随</title>
</head>
<body>
  <div id='app'>
    鼠标的位置：({
  {x}}, {
  {y}})
  </div>
</body>
<script src='../lib/vue.global.js'></script>
<script>
    const {
      createApp, ref, onMounted, onUnmounted } = Vue
    createApp({
     
      setup () {
     
        const x = ref(0)
        const y = ref(0)

        function updatePosition (event) {
     
          x.value = event.pageX
          y.value = event.pageY
        }

        onMounted(() => {
     
          window.addEventListener('mousemove', updatePosition, false)
        })

        onUnmounted(() => {
     
          window.removeEventListener('mousemove', updatePosition, false)
        })

        return {
     
          x, y
        }
      }
    }).mount('#app')
</script>
</html>