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>