vue3先执行js文件，后执行vue渲染怎么写

在 Vue3 中，可以使用 `setup()` 函数来编写组件的逻辑部分，包括数据响应式、计算属性、方法等。同时，可以使用 `template` 属性来编写组件的视图部分。

具体来说，你可以先在 `setup()` 函数中执行 js 文件，然后将需要在模板中使用的数据、方法等暴露出去。然后，在 `template` 中引用这些数据和方法，进行渲染。

下面是一个简单的示例：

<template>
  <div>
    <p>计数器：{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

// 引入需要执行的 js 文件
import './utils.js';

export default {
  setup() {
    // 定义响应式数据
    const state = reactive({
      count: 0
    });

    // 定义方法
    function increment() {
      state.count++;
    }

    // 暴露数据和方法
    return {
      count: state.count,
      increment
    };
  }
};
</script>

在这个示例中，我们先引入了一个 `utils.js` 文件，然后在 `setup()` 函数中定义了 `count` 数据和 `increment` 方法，并将它们暴露出去。在模板中，我们使用了这些数据和方法来渲染页面。