Vue3初始化如何调用函数

Vue3的初始化过程是在 createApp 函数中完成的。在这个函数中，可以调用一些辅助函数来进行初始化操作，例如创建根组件、挂载到DOM等。若要在初始化过程中调用函数，可以使用 beforeCreate 生命周期函数或者 setup() 函数。

使用 beforeCreate 生命周期函数

beforeCreate 生命周期函数是在组件创建之前被调用的，此时组件的数据、方法等都还没初始化完成。所以，可以在这个生命周期函数中调用函数：

<template>
  <div>{{ value }}</div>
</template>

<script>
export default {
  beforeCreate() {
    this.initData()
  },
  data() {
    return {
      value: ''
    }
  },
  methods: {
    initData() {
      this.value = 'Hello, Vue3!'
    }
  }
}
</script>

上面的示例中，在组件的 beforeCreate 中调用了 initData() 函数，该函数赋值了 value 数据，在模板中展示出来。

使用 setup() 函数

setup() 函数是 Vue3 中新引入的一个函数，用于在组件初始化时，进行一些数据初始化、依赖注入等操作。在 setup() 函数中，可以直接调用其他函数进行数据初始化，也可以返回一个包含数据和方法的对象。

<template>
  <div>{{ value }}</div>
</template>

<script>
export default {
  setup() {
    const initData = () => {
      return 'Hello, Vue3!'
    }

    const value = initData()

    return {
      value
    }
  }
}
</script>

上面的示例中，在 setup() 函数中定义了 initData() 函数用于初始化数据，之后直接调用该函数获取数据，然后返回一个包含数据 value 的对象，最终在模板中展示出来。

综上所述，在 Vue3 中可以通过生命周期函数 beforeCreate 或者 setup() 函数，在组件初始化过程中调用函数进行数据初始化等操作。