vue学習ノート1:v-forレンダリングの「オンサイト多重化」ポリシー

今日から先端で最も流行しているフレームワークの一つ:vue.jsさん、前にAngularJSの文章を見たことがありますが、フレームワークをよく勉強したことがありません.だから、これは私が勉強した最初のフロントエンドフレームワークです.良い記憶力は腐った筆頭に及ばず、ここでいくつかの学習ノートを書いて、学習過程を記録します.
私にとって、一つのことを学ぶ方法は、使用中にゆっくりとそれを理解することです.vueの公式ドキュメントのインストールとスタートの2つの章を見た後、私はまず小さなdemoを書いて勉強した簡単な文法を熟知するつもりです.todo listです.
このtodo listの主な機能は、todo事項の追加、削除、および事項の完了と取り消しの完了であり、localStorageを使用してクライアントにデータを格納することである.図は次のとおりです.
書き終わった後、私は1つの問題を発見しました.リストの1つ目のcheckboxをクリックしてこのtodoを完了したことを示すと、次のcheckboxが自動的に選択されました(このとき、元の1つ目はすでに完了したリストに移動しました.この1つは1つ目になりました).不思議なことに、テストしてみると、完了したリストからキャンセルしてもこのような状況があることがわかりました.とにかくクリックしてcheckboxの選択状況が少し乱れています.
バグを探す過程は言わないで、まず公式文書をたくさん読んでから手書きを書くべきかもしれません.
コードの一部は次のとおりです.

    
    

    X

computed:{
    unFinishedList:function(){
        return this.items.filter(function(item){
            return !item.isFinished;
        })
    }
}

問題はv-forのレンダリングで、公式ドキュメントには次のような言葉があります.
Vue.jsは、v-forでレンダリングされた要素のリストを更新している場合、デフォルトでは「その場で多重化」ポリシーを使用します.データ・アイテムの順序が変更されると、VueはDOM要素を移動してデータ・アイテムの順序に一致させるのではなく、ここで各要素を単純に多重化し、レンダリングされた各要素が特定のインデックスの下で表示されることを確認します.このデフォルトのモードは有効ですが、リストレンダリング出力は、頼子コンポーネントの状態や一時的なDOM状態(フォーム入力値など)に依存しない場合にのみ適用されます.
「オンサイト多重化」ポリシーのため、レンダリングtodoリストを更新すると、最初のcheckboxが選択されます.
解決策は2つあります.1つはliごとにkeyを追加することです.ドキュメントには次のような言葉があります.
Vueに各ノードのアイデンティティを追跡し、既存の要素を再利用して並べ替えるためのヒントを与えるには、各項目に一意のkeyプロパティを提供する必要があります.
これは解決策ですが、最も効果的ではありません.ドキュメントは次のように言います.
反復DOMコンテンツが十分に簡単でない限り、v-forをできるだけ使用してkeyを提供することをお勧めします.あるいは、デフォルトの動作に故意に依存してパフォーマンスの向上を得る必要があります.
このdemoは比較的簡単なので、keyを設ける必要はありません.もう一つの方法はtodo事項のイベントは必ずしもv-on:clickを使う必要はありません.私はcheckboxのクリックでv-on:click="toggleFinish(item)を使って状態を切り替えることができますが、実際にはそうする必要はありません.v-model="item.isFinished"を設定すれば同じ効果を達成することができます.
対照的に2つ目の方法がいいですが、ドキュメントはスタートのみを見ているので、これを使うことを考えずにclickイベントを直接使いました.ただし、v-forレンダリング時の「オンサイト多重化」ポリシーを理解しておくとよいでしょう.
PS:初めてブログを书いて、比较的にくどいかもしれませんが、记忆力が使いにくいことを発见して、1つの穴が缲り返し跳んで、数周间を过ぎて忘れてしまったので、书くつもりです.乾物がないかもしれませんが、ノートにする権利があります.