Vueリストレンダリングの詳しい説明

今回は、Vue リスト レンダリングの詳細な説明と、Vue リスト レンダリングの 注意事項 について詳しく説明します。以下は実際のケースです。見てみましょう。

Mutation メソッドは、名前が示すように、これらのメソッドによって呼び出される元の配列を変更します。対照的に、filter()、concat()、slice() などの非変更メソッドもあります。これらは元の配列を変更しませんが、常に新しい配列を返します。非突然変異メソッドを使用する場合、古い配列を新しい配列で置き換えることができます:

example1.items = example1.items.filter(function (item) {  return item.message.match(/Foo/)})
<div id="example">
  <div>
    <button @click="concat()">concat</button>
    <button @click="slice()">slice</button>
    <button @click="filter()">filter</button>
  </div>
  <ul>
    <li v-for="item in items">
      {{item.list}}
    </li>
  
  </ul>
</div>
<script>
  var example = new Vue({
    el:"#example",
    data:{
      items:[
        {list:5},
        {list:6},
        {list:7}
      
      ],
      addValue:{list:10}
    },
    methods:{
      concat(){
     this.items= this.items.concat(this.addValue)
      },
      slice(){
      this.items = this.items.slice(1)
      },
      filter(){
      this.items = this.items.filter(function(item,index,arr) {
          return (index > 0)
        })
      }
    
    }
  })

上記の操作では、Vue が既存の DOM を破棄してリスト全体を再レンダリングすることはありません。 Vue は DOM 要素の再利用を最大限に高めるためのいくつかのスマート ヒューリスティックを実装しているため、元の配列を同じ要素を含む配列に置き換えることは非常に効率的な操作です

注意事項

JavaScript の制限により、Vue は次の配列の変更を検出できません:

インデックスを使用して項目を直接設定する場合、たとえば:

vm.items[indexOfItem] = newValue

配列の長さを変更する場合、たとえば:

vm.items.length = newLength

最初の種類の問題を解決するには、次の 2 つの方法を実装できます。これは vm.items[indexOfItem] = newValue と同じ効果があり、statusupdate:

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

もトリガーします。2 番目のタイプの問題を解決するには、splice:

example1.items.splice(newLength)

を使用できます。この記事の事例を読んだ後は、それをマスターしたことになります。さらにエキサイティングな方法については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

HTML で タグを使用して個人的なお気に入りを記述する方法

img タグを使用して画像を作成する HTML 1 の FAQ

以上がVueリストレンダリングの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。