Vuejs - 什么时候应该初始化 jquery 插件

Question

我有一些需要初始化的 JQuery 插件，通常可以使用 $(document).ready(function () { }) 来完成，但是在 vue 组件 created 事件中这样做似乎不起作用。考虑到这一点，我使用了this.$nextTick(function () { })，但这似乎不适用于子组件上引入的元素。例如，我这样做：

created: function () {
  this.$nextTick(function () {
    window.materialadmin.AppOffcanvas.initialize()
  })
}

我有一个在子组件中引入的按钮，但上面代码附加的 onclick 处理程序不会触发。如果我这样做：

setTimeout(function () {
    window.materialadmin.AppOffcanvas.initialize()
}, 1000)

然后我的点击处理程序将被绑定并工作。

什么时候绑定我的事件才是正确的，这样我就不需要依赖 setTimeout 了？

Answer 1

mounted 或 updated Lifecycle-Hooks 应该可以解决您的问题，因为在刚刚挂载实例之后调用 mount ，其中 el 被新创建的 vm.$el 替换，并且在数据更改导致更新后调用要重新渲染和修补的虚拟 DOM。