VUE——v-for中key的使用注意事項，v-if和v-show的使用和特點

當Vue.js用v-for正在更新已渲染過的元素列表時，默認用“就地複用”策略。
如果數據項的順序被改變，Vue將不是移動DOM元素來匹配數據項的順序，而是簡單複用此處每個元素，並確保它在特定索引下顯示已被渲染過的每個元素。
爲了給Vue提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，需要爲每項提供一個唯一key屬性。

v-for循環中key屬性的使用

    <div id="app">
        <div>
            <label>Id:
                <input type="text" v-model="id">
            </label>

            <label>Name:
                <input type="text" v-model="name">
            </label>

            <input type="button" value="添加" @click="add">
        </div>

        <!--v-for循環的時候，key屬性只能使用number獲取string-->
        <!--key在使用的時候，必須使用v-bind屬性綁定的形式，指定key的值-->
        <!--在組件中，使用v-for循環的時候，或者在一些特殊情況中，如果v-for有問題，
        必須在使用v-for的同時指定唯一的字符串或數字類型的:key值-->
        <p v-for="item in list" :key="item.id">
            <input type="checkbox">{{item.id}} --- {{item.name}}
        </p>
    </div>

    <script>
        //創建Vue實例，得到ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                id:'',
                name: '',
                list: [
                    { id: 1, name: '蔡文姬'},
                    { id: 2, name: '程咬金'},
                    { id: 3, name: '狄仁傑'},
                    { id: 4, name: '高漸離'},
                ]
            },
            methods: {
                add(){ //添加方法
                    this.list.push({id: this.id, name: this.name})
                }
            }
        });
    </script>

v-if和v-show的使用和特點
v-if有更高的切換消耗而v-show有更高的初始渲染消耗。因此，如果需要頻繁切換v-show較好，如果在運行時條件不大可能改變v-if較好。

    <div id="app">
        <!--<input type="button" value="toggle" @click="toggle">-->
        <input type="button" value="toggle" @click="flag=!flag">

        <!--v-if的特點：每次都會重新刪除或創建元素-->
        <!--v-show的特點：每次不會重新進行DOM的刪除和創建操作，只是切換了元素的display: none樣式-->

        <!--v-if有較高的切換性能消耗-->
        <!--v-show有較高的初始渲染消耗-->

        <!--如果元素涉及到頻繁切換，最好不要使用v-if，而是推薦使用v-show-->
        <!--如果元素可能永遠也不會被顯示出來被用戶看到，則推薦使用v-if-->
        <h3 v-if="flag">這是用v-if控制的元素</h3>
        <h3 v-show="flag">這是用v-show控制的元素</h3>

    </div>

    <script>
        //創建Vue實例，得到ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                flag: true
            },
            methods: {
                toggle(){
                    this.flag = !this.flag
                }
            }
        });
    </script>