Vue.js、组合 API、"Mixins" 和生命周期挂钩

Question

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

在 Vue 2.x 中，您可以使用 mixin 来实现生命周期挂钩，例如：我可以使用

创建一个 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

Component.vue

<script>
import { onMounted } from 'vue'

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

    return {};
  },
}
</script>

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

Because setup is run around the beforeCreate and created lifecycle hooks, you do not need to explicitly define them. In other words, any code that would be written inside those hooks should be written directly in the setup function.

但是使用它作为 Mixins 的替代品怎么样？

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

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>

登录控制台：

Created
Mounted

Live example

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

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

然后

import { useDemoLifecycles } from './demoLifecycles'

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

const { a, b } = useDemoLifecycles()

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

更简单

Vue.js、组合 API、"Mixins" 和生命周期挂钩

Vue.js, composition API, "Mixins" and life-cycle hooks

vue.js

hook

mixins

vuejs3

vue-composition-api

但是使用它作为 Mixins 的替代品怎么样？