AG Grid生产构建缺失getValue()方法：Vite环境下如何解决？

问题原因 #

生产构建时，Vite会对<script setup>的defineExpose做优化处理，而AG Grid要求编辑器组件的getValue()必须是组件实例的直接属性/方法——它仅能识别setup()函数直接返回的方法，无法访问通过defineExpose暴露的上下文属性，这就导致生产环境下AG Grid找不到该方法报错。

解决方案 #

改用选项式API结合setup选项编写组件，让getValue()直接成为组件实例的方法：

<template>
  <input type="checkbox" v-model="checked" />
</template>

<script lang="ts">
import type { ICellEditorParams } from "ag-grid-community";
import { defineComponent, ref } from "vue";

export default defineComponent({
  props: {
    params: {
      type: Object as () => ICellEditorParams,
      required: true,
    },
  },
  setup(props) {
    const checked = ref(props.params.value);

    // 直接返回getValue方法，使其挂载到组件实例顶层
    return {
      checked,
      getValue: () => checked.value,
    };
  },
});
</script>

原理说明 #

通过defineComponent的setup选项直接返回getValue，该方法会被挂载到组件实例的顶层属性中，AG Grid无论在开发还是生产环境下，都能通过组件实例正常访问到getValue()方法，彻底规避defineExpose带来的生产构建兼容性问题。

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