在 Vue 中构建更好组件的四个技巧

在 Vue.js 中，有许多方法可以组合组件并重用逻辑。在本文中，我将展示一种在 Vue.js（2 及 3）中改进组合方式的方法。我确实欣赏最近的 Composition API 提议，但我认为视野还可以更开阔。下面，你可以看到一个实现了一种常规用例（从远端获取一个简单的数据并显示在 UI 中）的简单组件：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: null,
      content: null
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      axios.get('/api/data')
        .then(response => {
          this.title = response.data.title
          this.content = response.data.content
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

这个组件可以工作，但它并不是很灵活。如果我们想在另一个组件中重用数据获取逻辑，我们就必须复制粘贴代码。这很可能会导致代码重复和维护问题。

为了解决这个问题，我们可以使用 Composition API 和自定义钩子。自定义钩子是一种在组件中重用逻辑的强大方式。它们允许您将组件逻辑分解成更小的、更易于管理的部分。

要创建一个自定义钩子，我们首先需要创建一个 JavaScript 文件。在这个文件中，我们将导出一个函数，该函数将返回一个对象。这个对象将包含我们要在组件中重用的逻辑。

// my-hook.js
export default function useData() {
  const title = ref(null)
  const content = ref(null)

  const fetchData = async () => {
    const response = await axios.get('/api/data')
    title.value = response.data.title
    content.value = response.data.content
  }

  return {
    title,
    content,
    fetchData
  }
}

现在，我们可以在我们的组件中使用这个自定义钩子：

<template>
  <div>
    <h1>{{ title.value }}</h1>
    <p>{{ content.value }}</p>
  </div>
</template>

<script>
import { useData } from './my-hook.js'

export default {
  setup() {
    const { title, content, fetchData } = useData()

    fetchData()

    return {
      title,
      content
    }
  }
}
</script>

如你所见，我们现在可以将数据获取逻辑从组件中分离出来，并将其放入一个可重用的钩子中。这使得我们的组件更加灵活和可维护。

这种方法还可以与 Composition API 一起使用，以创建更具动态性和响应性的组件。Composition API 允许您在组件的 setup() 方法中定义响应式状态和方法。这使得您可以轻松地创建对用户交互做出反应的组件。

以下是如何将 Composition API 与自定义钩子结合使用的示例：

// my-component.js
import { useData } from './my-hook.js'

export default {
  setup() {
    const { title, content, fetchData } = useData()

    const isFetching = ref(false)

    const refreshData = async () => {
      isFetching.value = true
      await fetchData()
      isFetching.value = false
    }

    return {
      title,
      content,
      isFetching,
      refreshData
    }
  }

  template: `
    <div>
      <h1>{{ title }}</h1>
      <p>{{ content }}</p>
      <button @click="refreshData">Refresh</button>
    </div>
  `
}

在这个例子中，我们创建了一个名为 isFetching 的响应式变量来跟踪数据是否正在获取。我们还创建了一个名为 refreshData 的方法来手动刷新数据。当用户点击刷新按钮时，这个方法将被调用。

Composition API 和自定义钩子是创建灵活和可维护的 Vue.js 组件的强大工具。通过将组件逻辑分解成更小的、更易于管理的部分，您可以创建更易于重用和维护的组件。这将使您的应用程序更加健壮和易于扩展。