key的作用 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <!--面试题 key的作用？（内部原理）
                1.虚拟DOM中key的作用：
                        key是虚拟DOM对象的标识，当状态的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】
                        随后Vue进行【新虚拟DOM】与[旧虚拟DOM]的差异进行对比，比较规则如下：
                2.对比规则：
                    (1):旧虚拟DOM中找到与新DOM相同的key
                            1)若虚拟DOM中没变，直接使用之前的DOM
                            2)若虚拟DOM中内容改变了，则生成新的DOM，随后替换页面中之前的真实DOM
                    (2):旧虚拟DOM中未找到与新DOM相同的key
                            创建新的真实DOM，随后渲染到页面
                3.用index作为key可能引起的问题：
                    1.若对数据进行：逆序添加，逆序删除等破坏顺序操作
                        会产生没有必要的真实DOM更新===>界面效果没问题，但效率低下
                    2.如果结构中还包含输入类的DOM：
                        会产生错误DOM更新===>界面有问题
            -->
        <div id="app">
            <ul>
                <li v-for="item,index in person" :key="item.id">姓名:{{item.name}}年龄：{{item.age}}
                <input type="" name="" id="" value="" />
                </li>
            </ul>
            <button @click="add">添加一个老刘在大王前</button>
        </div>
        <script type="text/javascript">
            new Vue({
                el:"#app",
                data:{
                    person:[
                        {
                            name:'李四',
                            id:001,
                            age:18,
                        },
                        {
                            name:'大王',
                            id:002,
                            age:78
                        },
                        {
                            name:'lal',
                            id:003,
                            age:10
                        }
                    ]
                },
                methods:{
                    add(){
                        var p = {id:004,name:'老刘',age:50}
                        this.person.unshift(p)
                    }
                }
            })
        </script>
    </body>
</html>

 

posted @ 2021-08-17 19:48  幻影之舞  阅读(524)  评论(0)    收藏  举报