Event Listeners || getElementById 비교

Conclusion:

1. Vue Event Listeners:
   • Vue's event handling is generally efficient, and it integrates well with the reactivity system.
   • It's recommended to use Vue event listeners within your Vue components for better integration with the framework.
2. getElementById:
   • Direct DOM manipulation can be fast for simple operations.
   • If you are working within the context of a Vue component, it's usually better to leverage Vue's reactivity and event handling.

General Advice:

• Use Vue Event Handling in Components:
  • In the context of Vue components, it's often better to use Vue event handling for better integration with the framework's reactivity system.
• Avoid Frequent DOM Queries:
  • Minimize direct DOM manipulation and avoid frequent queries using methods like getElementById when working within a Vue component. Instead, leverage Vue's data-binding and event system.
• Measure Performance:
  • If you have specific performance concerns, it's always a good idea to measure and profile your application using browser developer tools to identify bottlenecks.

In summary, while both approaches have their place, in a Vue.js application, it's generally recommended to leverage Vue's event handling and reactivity system for better integration and maintainability.

---

내가 짐작하건데 버튼에 event trigger 장착하는 것과 query 나 document.findBy~~ 이거로 찾는 과정의 시간중 가장 짧은건 event trigger일 것임에 틀림없다.