使用多个 Vue 实例而不是组件答案

【问题标题】：Using multiple Vue instances instead of components使用多个 Vue 实例而不是组件
【发布时间】：2018-06-17 10:55:12
【问题描述】：

我有一个旧的 .NET MVC 项目，其中的视图是用 HTML、引导程序和 jQuery 构建的。我即将用 Vue.JS 替换 jQuery，但我不确定最好的方法。

所有视图彼此都非常不同，可重用组件的想法不会有用，因为没有 HTML 或在不同视图中使用的函数。

我认为最好的方法是保持 HTML 不变，而不是在组件内的模板中拆分它，我会在需要 Vue 的 HTML 的不同块上初始化 Vue 实例。

例如，我有一个包含 3 个表的视图，其中一个表可以通过 2 个模态进行修改。

<div>
<div id=table1></div>
<div id=table2></div>
<div id=table3></div>
<div id=modal1></div>
<div id=modal2></div>
</div>

对于这个视图，我将为 table3、modal1 和 modal2 初始化新的 Vue 实例。对于数据和状态，我将使用共享存储：https://vuejs.org/v2/guide/state-management.html

这对我来说似乎是一个很好且简单的解决方案，但我也读到这是非常糟糕的做法，所以我仍然不确定。

这种解决方案是不好的做法吗？

【问题讨论】：

Vue 并不像 jQuery 那样在现有的 HTML 上工作。它是数据驱动的，这意味着在大多数情况下，数据应该决定生成的 HTML。如果您打算采取简单地保持 HTML“原样”的路线，并且只想将 Vue 应用到它，那么您可能会遇到一个非常糟糕的时期。
@Stephan-v 不是真的“原样”，我所有的表、选择等都将由带有 v-for 和 v-bind 等的数据生成。我要问的是它是否是不好的做法是在 HTML 中有一个带有 v-for 和 v-bind 的大型 HTML 块，然后在这个 HTML 块的不同部分实例化多个 Vue 实例。
即使在这种情况下您可能不会重用某些组件，但最好将其放入组件中以获得更好的项目结构，尤其是在您使用共享存储/vuex 方法时。话虽如此，如果不深入研究项目，很难为这样一个极其广泛的问题提供建议。
这是您的问题的示例stackoverflow.com/questions/40173413/…

标签： vue.js vuejs2

【解决方案1】：

在我看来，通过使用单独的 Vues 与组件相比，您获得的收益并不多。您不能将Vue 应用于表三和模态而不将它们包装在某些东西中。

如果您担心组件会破坏 HTML 结构，您可能需要查看 inline-template。

【讨论】：

【解决方案2】：

您可以毫无问题地做到这一点。如果您愿意，可以使用全局对象或其他普通对象作为共享存储。您甚至可以将实例作为属性放入对象中：

var myInstances = {}
var sharedState = {table1:{...}, table2:{...}, shared21: {...}, ...} // use properties as you wish

myInstances.table1 = new Vue({
data: { myState: sharedState.table1, shared: sharedState.shared21 },
methods: { open(){...} } // for example
...
})

myInstances.table2 = new Vue({
data: { myState: sharedState.table2, shared: sharedState.shared21 },
methods: { openTable1(){ myInstances.table1.open();  } } // triggers the function open function in table1 instance
})

请记住，当您将对象的属性设为响应式时，此响应式功能不会与其他实例同步。

这种方法效果很好，比使用组件更容易学习。这当然不是完美的，使用组件的原因在 vuejs 文档中有说明。

【讨论】：