Vue-Component 中的 addEventListener 和 vanilla JS

Question

在 vue-components 中引用 dom-objects 时，vanilla eventListeners 似乎不起作用。

标记

<p id="test1">Hover this (works)</p>
<div id="app">
    <p id="test2">Hover this (not working)</p>
</div>

JS

document.querySelector('#test1').addEventListener('mouseover', function() {
    alert("HOVER1")
})

document.querySelector('#test2').addEventListener('mouseover', function() {
    alert("HOVER2")
})

new Vue({
    el: "#app"
})

实例

https://jsfiddle.net/seltsam23/dq7euos0/

这种行为是有意的吗？将 vanilla-js 与 vue 结合使用时还有其他限制吗？

Answer 1

实际上，唯一不工作的是示例，alert("HOVER2")这是因为 Vue 内容是动态呈现的，因此当您的脚本加载时，您要添加事件侦听器的元素可能还不存在。

如果你想让它工作，你需要将它移动到mounted钩子：

new Vue({
  el: "#app",
  mounted() {
    document.querySelector('#test2').addEventListener('click', function() { alert("HOVER2") })
  }
})

或者您可以使用一个小技巧，将您的querySelector内部放入setTimeout(() => ..., 0)其中将其推送到任务队列的末尾并在所有其他排队任务完成时运行它：

setTimeout(() => document.querySelector('#test2').addEventListener('click', function() { alert("HOVER2") }), 0);

但是，您应该使用 Vue 的内置事件并避免进行直接的 DOM 操作，因为 Vue 会丢弃您对 DOM 所做的一切，并在下次更新时使用它的虚拟 DOM 更新它。在这种情况下，它不会导致任何关键问题，但由于 Vue 有自己的事件处理程序，您应该使用它们。