VUE3中如何根据给定的字符串调用字符串的值所相对应的函数

在Vue3中，如果你想根据一个动态字符串来调用相应的函数，可以利用`eval`、`Function`构造函数或者字面量表达式结合计算属性（Computed）。但是，由于`eval`有安全风险，建议避免直接使用，尤其是处理用户输入。

下面是一个使用计算属性的例子，假设你有一个对象`methods`，存储了你要调用的所有函数：

export default {
  data() {
    return {
      functionName: '', // 这里是动态字符串，比如 "querySuccessAtOne"
    };
  },
  computed: {
    // 使用模板字符串和点操作符来获取并调用函数
    calledFunction() {
      const methodsObject = this.methods; // 假设这是一个包含所有函数的对象
      const funcToCall = methodsObject[this.functionName]; // 如果函数存在就返回，不存在则会是undefined
      return typeof funcToCall === 'function' ? funcToCall() : undefined;
    },
  },
};

然后你可以在组件内的某个地方设置`functionName`，例如：

<template>
  <button @click="functionName = 'querySuccessAtOne'">Call Function</button>
  <p>{{ calledFunction }}</p> <!-- 显示调用的结果 -->
</template>

这样，点击按钮时就会尝试调用`querySuccessAtOne`函数。