vue dom2级事件

vue中不能使用dom0级给dom元素添加点击事件等，因为vue标签可以绑定多个点击事件，而dom0级事件会进行覆盖，因此vue使用的是dom2级事件绑定。

结论：在vue中使用addEventListener进行事件绑定

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

<script>
import { onMounted, ref } from "vue";
export default {
  name: "HelloWorld",
  setup() {
    // mounted
    onMounted(() => {
      // 当界面挂载出来后就会自动执行
        let refreshBtn = document.getElementById("refreshBtn");

      // 安装命令函数
      let setCommand = function (button, func) {
        button.addEventListener("click", function () {
          func();
        });
      };

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

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

      // 设置命令的接收对象
      let refreshCommand = RefreshCommand(refreshBar);

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

<style scoped></style>