最好的方法來呈現在Vue公司

只讀內容我有下面的代碼，我使用到2個用戶最好的方法來呈現在Vue公司

<template> 
    <main> 
     <form action="" method="post" @submit.prevent="sendMessage"> 
      <textarea name="message" id="message" cols="30" rows="10" placeholder="Message"> </textarea> 
      <input type="submit" value="Send"> 
     </form>  
     <section v-if="messages.length"> 
      <div v-for="message in messages"> 
        {{message.body}} 
        <hr> 
      </div>  
     </section> 
     <section v-else> 
       No messages 
     </section> 
    </main> 
</template> 
<script> 
    import ajax from './ajax'; 
    export default { 
     data() { 
      return {     
       messages: [] 
      } 
     }, 
     methods: { 
      sendMessage(e){      
      }, 
      getMessages(pageNum, cb){ 
       ajax({ 
         url: `${window.location.pathname}?p=${pageNum}`, 
         method: 'get', 
         callback(res){ 
          cb(JSON.parse(res)); 
         } 
        }) 
      } 

     }, 
     created(){ 
      var vm = this; 
      vm.getMessages(1, (res) => { 
       vm.messages = res.data; 
       vm.loaded=true; 

      }); 

     } 
    } 
</script>

具體的代碼v-for="message in messages"，在我的組件的message屬性之間呈現消息。這些消息將被只讀，所以不會有事件監聽器或任何事物。所以它不會是在ajax調用後將它們保持在數組中的最佳方式。但是，會有一個加載更多的按鈕，在調用中加載10條消息，這些按鈕將被添加到數組中。

所以我想問一下如何在不渲染渲染後保留數組中的消息的情況下繼續保留它們在頁面上？或者，如果您可以建議更好，更高效的方式來實現這一點，我將不勝感激。

謝謝。

來源

2017-08-11 Karan

爲什麼你不能將消息存儲在'messages'數組中？ – thanksd

@thanksd我可以存儲，但正如我所提到的，我想知道是否有更好的方法沒有它，因爲保持它們在陣列中是沒有必要的。 – Karan

這是必要的，因爲組件可以/將被重新渲染。 – Bert

Vue背後的想法是，您的模型驅動視圖中的內容。如果它在你的模型中消失了，它會在你看來消失。如果您希望它出現在您的視圖中，它應該出現在您的模型中。

來源

2017-08-11 18:46:27

謝謝。你能否告訴我們，如果使用數組呈現數以千計的消息，它將如何影響內存和性能？或者我該如何評估這對客戶是好還是壞？ – Karan

視圖中的成千上萬條消息將比內存中的數千條消息更成爲問題。我無法告訴您如何評估客戶的體驗，但在我看來，客戶一般不想一次查看數千條消息。 –

最好的方法來呈現在Vue公司

回答

相關問題