当前位置：网站首页>15_ Key function and principle

15_ Key function and principle

2022-07-26 23:52:00 【ID does not exist.】

key Function and principle

Interview questions ：react、vue Medium key What's the role ？（key Internal principle ）

1. fictitious DOM in key The role of ：

key Is a virtual DOM Identification of the object , When the data in the state changes ,vue Will be based on 【 The new data 】 Generate 【 New virtual DOM】

And then vue Conduct 【 New virtual DOM】 And 【 Old virtual DOM】 Comparison of differences , The comparison rules are as follows ：

2. Comparison rules ：

（1） Old virtual DOM Found with the new virtual DOM same key：

①. If virtual DOM The content in the has not changed , Directly use the previous reality DOM！

②. If virtual DOM The content has changed , Then a new reality is generated DOM, Then replace the previous real... In the page DOM.

（2） Old virtual DOM The new virtual machine was not found in DOM same key： Create a new reality DOM, Then render to the page .

3. use index As key Problems that may arise ：

（1） If the data is ： Add in reverse order 、 Reverse order deletion and other destructive operations : It creates unnecessary reality DOM to update ==> The interface effect is OK , But low efficiency .

（2） If the structure also contains... Of the input class DOM： There will be mistakes DOM to update ==> There is a problem with the interface .

4. How to choose key?

（1） It is best to use the unique identification of each data as key, such as id、 cell-phone number 、 ID number 、 Unique value such as student number .

（2） If there is no reverse order addition to the data 、 Reverse order deletion and other destructive operations , For rendering only, the list is used to show , Use index As key There is no problem .

<body>
    <div id="root">
        <!--  Traversal array  -->
        <h2> Personnel list （ Traversal array ）</h2>
        <button @click.once="add"> Add an old Liu </button>
        <ul>
            <li v-for="(p,index) of persons" :key="p.id">
                {
   {p.name}}-{
   {p.age}}
                <input type="text">
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data: {
                persons: [{
                        id: '001',
                        name: ' Zhang San ',
                        age: 18
                    },
                    {
                        id: '002',
                        name: ' Li Si ',
                        age: 19
                    },
                    {
                        id: '003',
                        name: ' Wang Wu ',
                        age: 20
                    }
                ]
            },
            methods: {
                add() {
                    const p = {
                        id: '004',
                        name: ' Lao Liu ',
                        age: 40
                    }
                    this.persons.unshift(p)
                }
            },
        })
    </script>

原网站

版权声明
本文为[ID does not exist.]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/200/202207180947452611.html

当前位置：网站首页>15_ Key function and principle

15_ Key function and principle

key Function and principle

边栏推荐

猜你喜欢

随机推荐