列表渲染(key的原理)

<div id="root">

        <!-- 数组遍历 -->
        <h2>人员列表</h2>
        <button @click.once="add">添加一个老刘</button>
        <ul>
            <!-- index用来表示数组的索引值,key用来标志每个元素的唯一标识符 -->
            <li v-for="(p,index) in persons" :key="p.id">
                {{p.name}}-{{p.age}}
                <input type="text">
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        // 面试题：React和Vue中key的原理
        // 1、key是DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM
        // 2、随后Vue会根据新虚拟DOM和旧的虚拟DOM进行差异比较

        //比较规则如下
        //旧虚拟DOM中找到与新虚拟DOM相同的key:
        //若虚拟DOM内容没变，直接使用之前的真实DOM
        //若虚拟DOM内容改变，生成新的真实DOM

        //旧虚拟DOM中找到与新虚拟DOM相同的key:
        //创建新的真实DOM，然后渲染到页面

        //创建Vue实例
        const x = new Vue({
            el: '#root',
            //用于指定Vue为哪一个容器服务，值通常为css选择器字符串
            // el: document.getElementById('root')
            data: {
                persons: [
                    { id: '001', name: '张三', age: 18 },
                    { id: '002', name: '李四', age: 19 },
                    { id: '003', name: '王五', age: 20 },
                ],
            },
            methods: {
                add() {
                    const p = { id: '004', name: '老刘', age: 21 };
                    this.persons.unshift(p);

                }
            },
            //data用于存放数据，数据供el所指定容器服务
        })
    </script>