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

Question

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

在Vue2.x中，您可以将mixins用于生命周期挂钩，例如：我可以使用创建一个mixin.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()。来自文档：

因为安装程序是围绕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'

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

const { a, b } = useDemoLifecycles() 

注意，实际上在我的例子中没有太多Vue的"；魔术"；，就像Mixins一样。这几乎是纯JS的东西，而不是Vue特定的代码。所以它实际上比旧的选项API+Mixins更简单