Vue.js、组合 API、“混合”和生命周期钩子

问题描述

我一直在四处寻找（但我找不到）以下问题的答案。

在 Vue 2.x 中，您可以将 mixins 用于生命周期挂钩，例如：我可以使用

创建一个 Mixins.js

export default {
  created() {
    console.log('test');
  }
}

然后，在一个组件中，执行以下操作：

import mixins from "../misc/mixins";

export default {
  name: "My component",mixins: [mixins],created() {
    console.log('Another test');
  }
}

如果我运行“我的组件”，我会在控制台中同时获得“另一个测试”和“测试”。我找不到使用 Composition API 执行类似操作的方法（当然，我可以在“onMounted”内执行从另一个文件导入的函数，但这不是那么优雅）。

有办法吗？

谢谢！

解决方法

使用 Composition API，您必须导入所需的生命周期。包含列表的文档：https://v3.vuejs.org/guide/composition-api-lifecycle-hooks.html

Component.vue

<script>
import { onMounted } from 'vue'

export default {
  setup(props) {
    console.log('CREATED')
    onMounted(() => {
      console.log('MOUNTED')
    });

    return {};
  },}
</script>

请注意，没有 onCreated()。来自文档：

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以您不需要显式定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

但是如何使用它作为 Mixin 的替代方案？

现在，如果您愿意，您可以简单地将其提取到单独的文件中，通常称为可组合文件。

demoLifehooks.js

import { onMounted } from 'vue'

export default () => {
  console.log('Created')
  onMounted(() => {
    console.log('Mounted')
  })
}

现在只需导入并执行即可。

Component.vue

<script>
import useDemoLifecycles from './demoLifecycles.js'

export default {
  setup(props) {
    useDemoLifecycles()

    return {};
  },}
</script>

甚至更短，感谢 new script setup syntax.

<script setup>
import useDemoLifecycles from './demoLifecycles.js'
useDemoLifecycles()
</script>

登录控制台：

创建
已安装

Live example

将其命名为 useSomething 只是惯例。通过导出不是默认函数而是命名函数来强制它不是一个坏主意：

export const useDemoLifecycles = () => { console.log('code here') }

然后

import { useDemoLifecycles } from './demoLifecycles'

此外，如果您想从该文件中获取 refs 或其他数据，它将是

const { a,b } = useDemoLifecycles() 

请注意，实际上在我的示例中，并没有像 Mixins 那样具有太多 Vue 的“魔力”。这几乎是纯 JS 的东西，而不是 Vue 特定的代码。所以它实际上比旧的 Options API + Mixins 更简单。