如何为 Vue JS 创建自定义函数，如 created() 挂钩？答案

【问题标题】：How to create custom function for Vue JS like created() hook?如何为 Vue JS 创建自定义函数，如 created() 挂钩？
【发布时间】：2023-02-24 06:46:39
【问题描述】：

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

我还希望我的插件可以访问structure 返回值。

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

我不得不提到我使用 Inertia JS。

【问题讨论】：

structure() 挂钩的目的是什么？
您可以在 this.created 中添加一个调用 this.structure 的 mixin，否则。考虑解释你的情况

标签： vue.js

【解决方案1】：

您可以使用 Vue Mixins 或 Composables。

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

Mixins 非常方便，但是不再推荐

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>

【讨论】：