performance - Vue 3：如何实现修改 DOM 中所有输入字段的功能？

Question

我是 Vue 的新手，想为所有输入字段添加一个 onfocus 函数。当我使用 mixin 时，每次安装组件时都会调用该函数。

createApp(App).mixin({
    mounted() {
        myFunction() {
            document.querySelectorAll('input').doSomething()
        }
    }
}).mount('#app');

这是有道理的，通常也是我想要的，因为新添加的输入字段也应该受到影响。但是，每次挂载组件时，该函数都会遍历整个 DOM，对吧？我想避免对已经具有 onfocus 功能的字段进行不必要的迭代。那么做这样的事情的最佳做法是什么？

Answer 1

import { createApp, h } from "vue";
import App from "./App.vue";
const app = createApp({
  render: () => h(App)
});

app.mixin({
  methods: {
    myFunction() {
      this.$el.querySelectorAll("input").forEach((el) => {
        alert(el.getAttribute("name"));
      });
    }
  },

  mounted() {
    this.myFunction();
  }
});

app.mount("#app");