typescript - 为什么函数在 vue 3 设置 block 中立即执行

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>

现在我发现setup函数add在组件创建时执行。为什么add函数立即执行？如何避免它自动执行？我尝试像这样编写函数调用:

@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

尝试像在代码片段中返回对象而不是函数一样:

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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceb8bbab8efde0fce0fcf7" rel="noreferrer noopener nofollow">[email protected]</a>/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>