vue中不能使用dom0級(jí)給dom元素添加點(diǎn)擊事件等，因?yàn)関ue標(biāo)簽可以綁定多個(gè)點(diǎn)擊事件，而dom0級(jí)事件會(huì)進(jìn)行覆蓋，因此vue使用的是dom2級(jí)事件綁定。

結(jié)論：在vue中使用addEventListener進(jìn)行事件綁定

<template>
  <div>
    <button ref="refreshBtn" id="refreshBtn">refresh</button>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
export default {
  name: "HelloWorld",
  setup() {
    // mounted
    onMounted(() => {
      // 當(dāng)界面掛載出來后就會(huì)自動(dòng)執(zhí)行
        let refreshBtn = document.getElementById("refreshBtn");

      // 安裝命令函數(shù)
      let setCommand = function (button, func) {
        button.addEventListener("click", function () {
          func();
        });
      };

      // 接收對(duì)象
      let refreshBar = {
        refresh: function () {
          debugger;
        },
      };

      // 命令對(duì)象
      let RefreshCommand = function (receiver) {
        return function () {
          receiver.refresh();
        };
      };

      // 設(shè)置命令的接收對(duì)象
      let refreshCommand = RefreshCommand(refreshBar);

      // 安裝命令
      setCommand(refreshBtn, refreshCommand);
    });
  },
};
</script>

<style scoped></style>