Vue.jsコードに複数の小さなインスタンスまたは1つの大きなインスタンスがあるべきですか？

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というツールが必要です。

コードのパフォーマンスのために、多くのインスタンスには複数のインスタンスが必要です。しかし、1つの欠陥が翡翠の素晴らしさをあいまいにすることはできません。性能の無意味な失われた維持可能性が許容されます。