为什么函数在 vue 3 设置块中立即执行

Question

我在 vue 3 中这样定义一个函数：

setup(props) {
    
    const { getters } = useStore();

    const add = () => {
      alert("dd");
    };

    return (
      add
    );
  }

并像这样在模板中调用它：

<button type="button" class="translate-pop-button" @click="()=>add">
        <span class="reddwarf-btn-icon"></span>
      </button>

现在我发现设置函数在创建组件时添加执行。为什么添加功能立即执行？如何避免它自动执行？我试过像这样编写函数调用：

@click="()=>add"

好像没用。这是我如何安装组件的代码：

export async function addTransShowElement(translation:string){
  let anchorElementId = "uniq-anchor-point";
  let anchorElement = document.getElementById(anchorElementId);
  if (anchorElement == null || anchorElement === undefined) {
    let reddwarfTranslateDiv = document.createElement("div");
    reddwarfTranslateDiv.id = anchorElementId;
    document.body.appendChild(reddwarfTranslateDiv);
  }
  let appElement = document.getElementById("reddwarf-translate-app");
  if (appElement == null || appElement === undefined) {
    let props = {
      word: translation.toString().trim(),
    };
    const app = createApp(TranslatorPop, props);
    app.use(store);
    let vm = app.mount("#uniq-anchor-point");
    document.body.appendChild(vm.$el);
  }
}

Answer 1

像代码段中那样尝试 return 对象不起作用：

const App = {
  setup() {
    const add = () =>  alert("dd");
    return {   // you was calling it here with ()
      add
    };
  }
}
Vue.createApp(App)
  .mount('#app')

<script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script>
<div id="app">
  <button type="button" class="translate-pop-button" @click="add">
    <span class="reddwarf-btn-icon">click</span>
  </button>
</div>

为什么函数在 vue 3 设置块中立即执行

Why the function execute immediately in vue 3 setup block

typescript

vue.js

vuejs3