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

Question

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

在 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”中执行从另一个文件导入的函数，但这不是那么优雅）。

有办法吗？

谢谢！

Answer 1

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

组件.vue

<script>
import { onMounted } from 'vue'

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

    return {};
  },
}
</script>

请注意，没有onCreated(). 从文档：

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

但是如何使用它作为 Mixins 的替代品呢？

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

demoLifehooks.js

import { onMounted } from 'vue'

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

现在只需导入它并执行。

组件.vue

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

export default {
  setup(props) {
    useDemoLifecycles()

    return {};
  },
}
</script>

由于新的脚本设置语法，甚至更短。

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

登录控制台：

已创建 已
安装

活生生的例子

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

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

进而

import { useDemoLifecycles } from './demoLifecycles'

此外，如果您想要来自该文件的引用或其他数据，它将是

const { a, b } = useDemoLifecycles() 

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