v-for ：key的遍历机制

最新推荐文章于 2022-11-20 21:53:54 发布

顿顿不离蛋

最新推荐文章于 2022-11-20 21:53:54 发布

阅读量154

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_45300842/article/details/126525657

版权

1.用index作为key和不加key是一样的，都采用“就地复用”的策略
2.diff算法默认使用“就地复用”的策略，是一个首尾交叉对比的过程
3.“就地复用”的策略，只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出
4.将与元素唯一对应的值作为key，可以最大化利用dom节点，提升性能

合理利用index 和：key 提高性能的同时避免受diff 的影响

 <div v-for="(item,index) in noticeData.noticeList" :key="item.id">
                    <el-row>
                        <el-form-item :label="`通知人姓名${index+1}`">
                            <el-input v-model="item.name"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="电话：">
                            <el-input v-model="item.phone"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="邮箱：">
                            <div class="item-more">
                                <el-input v-model="item.email"></el-input> <i class="el-icon-plus plus" @click="addItemHandler(item,index)"></i> <i v-if="index>0" class="el-icon-minus mius" @click="deleteItemHandler(item,index)"></i>
                            </div>
                        </el-form-item>
                    </el-row>
                </div>

            noticeData:{
                noticeDialogVisible:false,
                noticeList:[
                    {
                        name:'',
                        phone:'',
                        email:'',
                        id:1
                    }
                ]
            }

        addItemHandler(item,index){
            console.log(index,'this.noticeData.noticeList')

            if (this.noticeData.noticeList.length>9){ return this.$message.warning('每次最多通知10个联系人')}
            this.noticeData.noticeList.push({
                name:'',
                phone:'',
                email:'',
                id:this.noticeData.noticeList[this.noticeData.noticeList.length-1].id+1
            })
        },
        deleteItemHandler(item,index){
            this.noticeData.noticeList.splice(index,1)
            console.log(this.noticeData.noticeList)
        },