Vue.js 是一個廣泛應用在前端的 Web 框架，它以輕量、高效和易于學習聞名，Vue.js 2.x 版本中包含了一系列重要的特性，其中包含了一個重要的 API：addEventListener 。

el.addEventListener(eventName, eventHandler, [options]);

其中，el 代表監聽事件的元素，eventName 代表需要監聽的事件名稱，eventHandler 代表事件觸發后執行的回調函數，options 可選，為一個對象，表示一些監聽事件時的配置信息。addEventListener 函數主要用于動態地添加指定的事件監聽器，一次性可以添加多個函數作為回調，有效避免了直接編寫 DOM 元素操作的一些繁瑣的操作，簡化代碼邏輯。

在 Vue.js 中，addEventListener 方法常常用于監聽點擊事件、滾動事件、鼠標移動事件等，方便我們編寫更加靈活、高效的 Web 應用。

使用 addEventListener 并非一定要在 Vue.js 中直接調用，實際上，JavaScript 中的任意一個元素都可以使用該函數增加事件監聽器。

// 使用 JavaScript 在指定元素上添加事件監聽器
document.getElementById('test').addEventListener('click', function () {
// do something
})

當然，在 Vue.js 中使用 addEventListener 時也需要遵循一些規則，比如需要首先通過 ref 或運算符 $refs 獲取 DOM 元素，從而進行事件監聽：

<template>
<div ref="myDom" @click="handleClick">
...
</div>
</template>
<script>
// 在 Vue.js 中使用 ref 獲取 DOM 元素并添加事件監聽器
export default {
methods: {
handleClick() {
console.log('click')
}
},
mounted() {
const el = this.$refs.myDom;
el.addEventListener('click', this.handleClick);
}
}
</script>

需要注意的是，當我們為一個組件的根元素添加事件監聽器時，需要在事件銷毀后及時移除，避免發生內存泄漏。在 Vue.js 中可以使用 $nextTick 來移除事件監聽器：

export default {
mounted() {
const el = this.$el;
el.addEventListener('click', this.handleClick);
this.$once('hook:beforeDestroy', () =>{
el.removeEventListener('click', this.handleClick);
})
},
methods: {
handleClick() {
console.log('click')
}
}
}

除了 addEventListener，Vue.js 還提供了一系列其他的事件綁定指令和生命周期鉤子函數，如 v-on 指令、v-bind 指令、created 鉤子函數等，針對不同場景、不同需求有不同的使用方法。對于需要在 Vue.js 中添加事件監聽器的開發者來說，熟練掌握 addEventListener 的使用方法可以提高自身的代碼編寫效率和代碼可維護性。