如何在 Vue 中的每个路由上重新初始化一个包？答案

【问题标题】：How to reinitialize a package on each routing in Vue?如何在 Vue 中的每个路由上重新初始化一个包？
【发布时间】：2017-05-11 06:31:00
【问题描述】：

我找到了tool for table management，我很喜欢。唯一的问题是它需要初始化，如下所示，这意味着它只被调用一次——当页面被加载时。

mounted: () => {
  $(document).ready(function () { 
    $("table").DataTable();
  }
}

我已将代码放在mounted 部分，我也尝试使用created。出于某种原因（可能是渲染顺序），我必须将它保存在 ready 方法中 - 否则它不会出现。

这给我带来了两个问题。首先，我在多个组件中重用相同的组件作为矩阵视图（它是基于商店动态设置的）。其次，当我从页面导航然后返回时，它不会重新初始化。

我应该如何让 ready 方法中的代码在每次组件进入视图时运行？

我用谷歌搜索了一下，但这不是一个常见的问题，而且我的弹药用完了。我得到的最好的打击是the life cycle of the component，在那里我看不到任何突破性的东西。我还发现 data table instance needs to be destroyed 但这只有在我调用这些东西时才有帮助，这似乎不会发生。

【问题讨论】：

标签： javascript datatables bootstrap-4 vue-router vue.js

【解决方案1】：

我相信您只需要执行以下操作：

mounted () {
    $("table").DataTable();
}

$(document).ready 检测到文档准备好了，但是在 vue 的情况下，mounted 在实例刚刚挂载后被调用，其中 el 被新创建的 vm.$el 替换，应该相当于 document .准备好了。

我还检查了 vue 2.x.x，如果您从页面导航然后返回，则会调用挂载。

如果此代码依赖于正在加载的数据和组件的重新渲染，您可以使用 updated 而不是在数据更改导致虚拟 DOM 重新渲染和修补后调用的 mount。

updated () {
    $("table").DataTable();
}

【讨论】：

是的，我也这么认为。但这是奇怪的部分 - 它不适用于您建议的代码。但是，如果我们稍微延迟一下，那就可以了。所以这很好： setTimeout(() => { $("table").DataTable(); }, 100); 但是如果我们将 100 设置为 0，它就不会渲染。就像有一个微小的延迟（在 Vue 或 DataTable 或两者中），我需要等待。而且我在创建基于一堆超时的架构时遇到了很大的问题，呵呵。这是灾难的根源，也是糟糕设计的明显迹象。我应该在哪里挂钩数据表创建过去安装？
@KonradViltersten 正如您所说的延迟后可以工作，这是否取决于数据加载？如果不是这样，您可以尝试 updated 钩子，它在数据更改导致虚拟 DOM 重新渲染和修补后调用。
这似乎可以解决问题。请将其添加到答案中，以便我可以接受并 +1。 Vue 页面上的生命周期图非常具有误导性——一些钩子被描绘成圆圈，一些被描绘成盒子（边框的颜色相同，但我没有看到，因为盒子的背景是白色的）。所以我认为唯一可用的钩子是mounted和destroyed。
我注意到您使用 updated(){...} 而不是我通常写的 updated:()=>{}。从语义上讲有什么区别吗？
@KonradViltersten 这很棘手，我从here 可以理解的是，如果我们在没有=> 的情况下编写，函数将this 定义为全局对象，而不是封闭函数的this。希望这会有所帮助，但我自己并不是很清楚。