我的Vue.js代码应该有多个小实例还是一个大实例？

Question

我以vue.js开头。我的问题是关于设计模式。

我应该有多个实例的Vue像这样的：

 var example = new Vue({ 
      el: '#post-list', 
      data: { 
      posts: [ 
       { title: 'Foo' }, 
       { title: 'Bar' } 
      ] 
      } 
     }); 

     var example2 = new Vue({ 
      el: '#post-list2', 
      data: { 
      posts: [ 
       { title: 'Foo' }, 
       { title: 'Bar' } 
      ] 
      } 
     }); 

或者我应该尝试组大#APP元素在我的Vue公司代码：

 var app= new Vue({ 
      el: '#app', 
      data: { 
      posts1: [ 
       { title: 'Foo' }, 
       { title: 'Bar' } 
      ], 
      posts2: [ 
       { title: 'Foo' }, 
       { title: 'Bar' } 
      ] 
      } 
     }); 

我期待代码维护和性能。每种方法的优点是什么？有更好的模式可以遵循吗？

Answer 1

对于代码维护，Single File Component，它与第一个代码片段具有相同的用途，但建议使用更多工程设计，顺便提一下，vue-cli可能是您需要的工具。

对于代码性能，许多实例的成本不止一个实例。但是一个缺陷不能掩盖玉石的辉煌。性能的显着损失带来的可维护性是可以接受的。