Vue基础系列列表渲染-—v-forkey=列表过滤_监视属性实现_computed实现_列表实时排序

Posted 2022-03-21 勇敢*牛牛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue基础系列列表渲染-—v-forkey=列表过滤_监视属性实现_computed实现_列表实时排序相关的知识，希望对你有一定的参考价值。

和阿牛一起冲Vue

🌕写在前面
🍊博客主页 ：勇敢link牛牛
🎉欢迎关注：🔎点赞👍收藏⭐️留言📝
🌟本文由 勇敢link牛牛 原创，CSDN首发！
📆首发时间：🌹2022年3月17日🌹
🆕最新更新时间：🎄2022年3月17日🎄
✉️愿你熬过万丈孤独，藏下星辰大海！
📠参考书籍：📚《Vue2》

列表渲染（四种情况）

<!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">
    <title>列表渲染</title>
</head>

<body>
    <div id="root">
        <h1>数组遍历(用的多)</h1>
        <ul>
            <li v-for="p in message" :key="p.id">
                <!-- 或者 -->
                <!-- <li v-for="(p,index) in message" :key='index'> -->
                p.name-p.age
            </li>
        </ul>
        <h1>对象遍历</h1>
        <ul>
            <li v-for="(value,key) in person" :key='key'>
                key-value
            </li>
        </ul>
        <h1>字符串遍历</h1>
        <ul>
            <li v-for="(char,index) in str" :key='index'>
                char-index
            </li>
        </ul>
        <h1>遍历指定次数</h1>
        <ul>
            <li v-for="(num,index) in 5" :key='index'>
                num-index
            </li>
        </ul>
    </div>
</body>
<script src='vue.js'></script>
<script>
    Vue.config.productionTip = false;
    new Vue(
        el: '#root',
        data: 
            name: 'jack',
            message: [
                 id: '001', name: '张三', age: 18 ,
                 id: '002', name: '李四', age: 19 ,
                 id: '003', name: '阿紫', age: 20 
            ],
            person: 
                name: '勇敢牛牛',
                age: '23',
                sex: '男'
            ,
            str: "hello"
        
    );
</script>

</html>

key的作用与原理

面试题：react、vue中的key有什么作用？（key的内部原理）

1、虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

2.对比规则：
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key

创建新的真实DOM，随后渲染到到页面。

3、用index作为key可能会引发的问题：

若对数据进行：逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。

开发中如何选择key?:

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

<!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">
    <title>key的原理</title>
</head>

<body>
    <div id="root">
        <h1>数组遍历(用的多)</h1>
        <ul>
            <!-- <li v-for="p in message" :key="p.id"> -->
            <!-- 或者 -->
            <li v-for="(p,index) in message" :key='p.id'>
                p.name-p.age
                <input type="text">
            </li>
        </ul>
        <button @click.once="add">点击添加一个老刘</button>
    </div>
</body>
<script src='vue.js'></script>
<script>
    Vue.config.productionTip = false;
    new Vue(
        el: '#root',
        data: 
            name: 'jack',
            message: [
                 id: '001', name: '张三', age: 18 ,
                 id: '002', name: '李四', age: 19 ,
                 id: '003', name: '阿紫', age: 20 
            ],
        ,
        methods: 
            add() 
                const p =  id: '004', name: "老刘", age: 40 ;
                this.message.unshift(p);
                // 存在效率很低的问题
            
        
    );
</script>

</html>

列表过滤_监视属性实现

<!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">
    <title>列表过滤</title>
</head>

<body>
    <div id="root">
        <h1>模糊搜索</h1>
        <input type="text" name="" id="" placeholder="请输入姓名" v-model:value="keyWorld">
        <ul>
            <li v-for="(p,index) in person" :key='p.id'>
                p.name-p.age
            </li>
        </ul>

    </div>
</body>
<script src='vue.js'></script>
<script>
    Vue.config.productionTip = false;
    new Vue(
        el: '#root',
        data: 
            name: 'jack',
            keyWorld: '',
            message: [
                 id: '001', name: '马冬雨', age: 18 ,
                 id: '002', name: '周冬梅', age: 19 ,
                 id: '003', name: '周杰伦', age: 20 ,
                 id: '004', name: '温兆伦', age: 20 
            ],
            person: []
        ,
        watch: 
            keyWorld: 
                immediate: true,
                handler(val) 
                    this.person = this.message.filter(//过滤
                        function (p) 
                            return p.name.indexOf(val) !== -1;
                        
                    )
                
            
        
    );
</script>

</html>

computed实现过滤

<!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">
    <title>列表排序</title>
</head>

<body>
    <div id="root">
        <h1>人员列表</h1>
        <input type="text" name="" id="" placeholder="请输入姓名" v-model:value="keyWorld">
        <button @click="sortType=2">年龄升序</button>
        <button @click="sortType=1">年龄降序</button>
        <button @click="sortType=0">原序列</button>
        <ul>
            <li v-for="(p,index) in file" :key='p.id'>
                p.name-p.age
            </li>
        </ul>

    </div>
</body>
<script src='vue.js'></script>
<script>
    Vue.config.productionTip = false;
    new Vue(
        el: '#root',
        data: 
            name: 'jack',
            keyWorld: '',
            sorType: 0,//原序列
            message: [
                 id: '001', name: '马冬雨', age: 18 ,
                 id: '002', name: '周冬梅', age: 19 ,
                 id: '003', name: '周杰伦', age: 10 ,
                 id: '004', name: '温兆伦', age: 23 
            ],
            person: []
        ,
        computed: 
            file() 
                return this.message.filter(//过滤
                //注意这里使用的是箭头函数
                    (p) => 
                        return p.name.indexOf(this.keyWorld) !== -1;
                    
                )
            
        
    );
</script>

</html>

列表实时排序

<!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">
    <title>列表排序</title>
</head>

<body>
    <div id="root">
        <h1>人员列表</h1>
        <input type="text" name="" id="" placeholder="请输入姓名" v-model:value="keyWorld">
        <button @click="sortType=2">年龄升序</button>
        <button @click="sortType=1">年龄降序</button>
        <button @click="sortType=0">原序列</button>
        <ul>
            <li v-for="(p,index) in file" :key='p.id'>
                p.name-p.age
            </li>
        </ul>

    </div>
</body>
<script src='vue.js'></script>
<script>
    Vue.以上是关于Vue基础系列列表渲染-—v-forkey=列表过滤_监视属性实现_computed实现_列表实时排序的主要内容，如果未能解决你的问题，请参考以下文章 
 vue06 基础-列表渲染
 Vue基础(下)：条件渲染列表渲染(key)过滤器内置和自定义指令
 Vue基础篇--5列表渲染v-for
 vue-常用指令&条件渲染&列表渲染
 Vue学习计划(基础三)-class与style绑定,条件渲染和列表渲染
 Vue的列表渲染及组件渲染