javascript - 带有 Vanilla JS 的 Vue-Component 内的 addEventListener

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 钩子(Hook)上:

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 的内置 events并避免进行直接的 DOM 操作，因为 Vue 会丢弃您对 DOM 所做的任何操作，并在下一次更新时用它的虚拟 DOM 更新它。在这种情况下，它不会导致任何严重的结果，但由于 Vue 有自己的事件处理程序，您应该使用它们。