Vue 进阶面试题, Vue 组件中,如果使用原生 addEventListener 监听事件,是否需要手动销毁?为什么?
Vue 进阶面试题, Vue 组件中,如果使用原生 addEventListener 监听事件,是否需要手动销毁?为什么?
QA
Step 1
Q:: 在 Vue 组件中，如果使用原生 addEventListener 监听事件，是否需要手动销毁？为什么？
A:: 是的，需要手动销毁。Vue 组件在销毁时，Vue 只会自动移除由指令（如 v-on）绑定的事件监听器，但不会自动移除通过 addEventListener 添加的原生事件监听器。如果不手动销毁，可能会导致内存泄漏，尤其是当事件监听器绑定在全局对象（如 window、document）或其他组件元素上时，监听器不会随组件销毁而移除，从而继续占用内存资源。
Step 2
Q:: Vue 中的自定义事件和原生事件有什么区别？
A:: Vue 中的自定义事件是通过 $emit 和 $on 来管理的，可以在父子组件之间传递，事件的销毁和绑定由 Vue 自动管理。原生事件是通过 addEventListener 绑定的，不依赖 Vue 的事件系统，需要开发者手动管理其生命周期。
Step 3
Q:: 如何在 Vue 中优雅地处理异步操作（如 API 调用）？
A:: 在 Vue 中处理异步操作通常使用 async/await 或者 Promises。可以在生命周期钩子中发起 API 请求，比如在 created 或 mounted 钩子中。此外，还可以利用 Vuex 来管理应用状态，异步操作的结果可以通过 mutations 修改 Vuex 状态，从而更新组件视图。
Step 4
Q:: 如何优化 Vue 应用的性能？
A:: 优化 Vue 应用的性能可以通过多种方式进行：1) 使用 Vue 的异步组件加载来实现按需加载；2) 使用 Vuex 的模块化和懒加载模块减少初始化时的开销；3) 在大量数据渲染时使用虚拟滚动或分页技术；4) 在表单中使用 v-model.lazy 修饰符减少不必要的重新渲染；5) 合理使用 computed 和 watch 避免不必要的计算。