vue中:key的原理

最新推荐文章于 2024-02-02 09:18:21 发布

Typora好用

最新推荐文章于 2024-02-02 09:18:21 发布

阅读量109

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_55108781/article/details/127437228

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>02_key的原理</title>
</head>
<!-- 
面试题：react、vue中的key有什么作用？（key的内部原理）
        
        1. 虚拟DOM中key的作用：
            key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 
            随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
                        
        2.对比规则：
            (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
                （会把里面的很多dom元素一个一个的对比，没有变就直接复用，变了就用新的）
                ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
                ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

            (2).旧虚拟DOM中未找到与新虚拟DOM相同的key
                创建新的真实DOM，随后渲染到到页面。
                                
        3. 用index作为key可能会引发的问题：
            1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
                会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

            2. 如果结构中还包含输入类的DOM：
                            会产生错误DOM更新 ==> 界面有问题。

        4. 开发中如何选择key?:
            1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
            2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
                使用index作为key是没有问题的。
		-->

<body>

    <div id="root">

        <h2>学生列表</h2>
        <ul>
            <li v-for="(i,index) of persons" :key='index'>
                {{i.name}}--{{i.age}}--{{index}}
                <input type="text">
            </li>
        </ul>
        <button v-on:click.once='add'>点击添加一个老刘</button>


    </div>

    <script>

        Vue.config.productionTip = false

        const vm = new Vue({
            el: '#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: 99 }
                    this.persons.unshift(p)
                }
            }

        })
    </script>
</body>

</html>

遍历使用 index作为key的值