如何为 Vue JS 创建自定义函数，例如created()钩子？

Question

我应该如何创建一个插件，将名为struct的函数（如created()挂钩）添加到所有组件？

此外，我希望我的插件能够访问结构返回值。

export default {
   structure() {
       // Access to context
   }
}

我不得不提一下我使用 Inertia JS。

Answer 1

您可以使用 Vue Mixins 或 可组合项。

两者都可以为您提供一些共享的函数和变量。但我不知道如何在 Vue 中定义新的钩子，比如 create() 。我必须自己在created() 中启动你的函数。当然，您可以使用 Mixins 覆盖现有的 Vue hooks。

Mixin 非常方便，但不再推荐

Composition API 中没有 created() ，所以你必须使用onBeforeMount()或onMounted()

这是一个使用这两种技术的非常基本的示例

const { createApp, ref, onBeforeMount } = Vue;

const myMixin = {
  created() {
    console.log('myMixin: created()')
  }
}

const myComposable = () => {
    onBeforeMount(() => {
       console.log('myComposable: onBeforeMount()')    
    })
    const myFunction = () => console.log('myFunction()')    
    return { myFunction }
}

const App = {
  setup() {
    const { myFunction } = myComposable()
    return  { myFunction }
  },
  mixins: [myMixin]
}

const app = createApp(App)
app.mount('#app')

<div id="app">
  <button @click="myFunction()">myFunction()</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>