当前位置：首页 > news >正文

Vue之列表渲染

news 来源：原创 2025/5/2 3:35:51

总的来说，列表渲染中key最好选择数据中唯一！尽量不要默认index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js">

    </script>
</head>
<body>

    <!-- 遍历时都是(value,key) -->
    <!-- 
        1. 虚拟DOM中key的作用:
            key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据[新数据]生成[新的虚拟DOM]
            随后Vue进行[新的虚拟DOM]与[旧的虚拟DOM]差异比较,比较规则如下.
        
        2. 对比规则
            (1). 旧虚拟DOM中内容没变,直接复用之前的真实DOM
                若虚拟DOM内容变了,则生成新的真实DOM
            (2). 没有找到,直接生成新的真实DOM
        
        3.用index作为key可能回发生问题
            (1).对数据进行逆序添加,逆序删除等破坏顺序操作,会进行没有必要的真实DOM更新
            (2).如果结构包括输入类DOM会产生错误DOM更新.
        4.key选择
            (1).最好选择数据的唯一.身份证号等.
            (2).如果没有逆序,用index也行.

     -->
    <div id="app">
        <h2>遍历数组(用的多)</h2>
        <button @click.once="add">添加一个老薛</button>
        <li v-for="(p,index) of persons":key="p.id">
           {{p.name}}-{{p.age}}
           <input type="text">
        </li>
        

    </div>


    <script type="text/javascript">
        const vm = new Vue({
            el:"#app",
            data(){
                return {
                    persons:[
                        {id:"001",name:"Barry",age:12},
                        {id:"002",name:"Barry2",age:12},
                        {id:"003",name:"Barry3",age:12},
                    ],
                    car:{
                        name:"奔驰E300L",
                        price:"65W",
                        color:"Black"
                    },
                    str:"Barry"
                }                
            },
            methods: {
                add(){
                    const p = {id:"004",name:"老薛",age:24}
                    this.persons.unshift(p)
                }
            },
        })

    </script>
</body>
</html>