Vue3组合式API：从组件导出函数并在主组件导入及报错处理

问题代码 #

// File2.vue
<script>
  import { ref, computed } from 'vue';
  let ex = ref(1);

  const sum = computed(() => {
    let value = 5 + 5;
    return value
  });

</script>

<template>
  <div class="page">
    <span>No {{ ex }}</span>
  </div>
</template>

需求是在Main.vue中导入该组件和sum计算属性，但将sum放入setup导出后，出现错误：Property "ex" was accessed during render but is not defined on instance。

错误原因 #

当你把sum放到setup函数中导出时，组件模板的上下文只包含setup返回的变量，而原来顶层定义的ex没有被暴露到组件实例上，模板自然找不到这个属性。Vue 3中，模板能访问的变量必须是setup返回的对象属性，或者使用<script setup>时顶层声明的变量（自动暴露给模板）。

两种解决方案 #

方案1：保留组件状态并暴露sum给外部 #

使用Vue 3的<script setup>语法，它会自动将顶层声明的变量暴露给模板，同时通过defineExpose把sum暴露给外部组件：

修改后的File2.vue：

// File2.vue
<script setup>
import { ref, computed } from 'vue';
// 顶层声明的ref自动让模板可以访问
const ex = ref(1);

const sum = computed(() => {
  let value = 5 + 5;
  return value;
});

// 把sum暴露给外部组件
defineExpose({ sum });
</script>

<template>
  <div class="page">
    <span>No {{ ex }}</span>
  </div>
</template>

Main.vue中通过组件ref获取sum：

// Main.vue
<script setup>
import { ref, onMounted } from 'vue';
import File2 from './File2.vue';

const file2Instance = ref(null);

onMounted(() => {
  // 访问组件实例上的sum
  console.log(file2Instance.value.sum.value); // 输出10
});
</script>

<template>
  <File2 ref="file2Instance" />
</template>

方案2：抽离独立的计算属性（推荐，逻辑解耦） #

如果sum不需要依赖File2的组件状态，直接把它抽成独立的工具模块，避免组件和业务逻辑耦合：

创建utils.js：

// utils.js
import { computed } from 'vue';

export const sum = computed(() => {
  let value = 5 + 5;
  return value;
});

修改File2.vue：

// File2.vue
<script setup>
import { ref } from 'vue';
import { sum } from './utils.js';

const ex = ref(1);
// 组件内部需要用sum的话直接用即可
</script>

<template>
  <div class="page">
    <span>No {{ ex }}</span>
  </div>
</template>

Main.vue直接导入使用：

// Main.vue
<script setup>
import { sum } from './utils.js';
import File2 from './File2.vue';

console.log(sum.value); // 输出10
</script>

<template>
  <File2 />
</template>

内容的提问来源于stack exchange，提问作者NewJS