这是我参与「第五届青训营」伴学笔记创作活动的第10天

前言：

本文接上文“前端入门之Vue.js——Vue基础(2) | 青训营笔记”，继续总结Vue学习过程中的重要知识点，便于日后复习巩固。

10.条件渲染

v-if：
- 写法：
  1. v-if="表达式"
  2. v-else-if="表达式"
  3. v-else
- 适用于：切换频率较低的场景
- 特点：不展示的DOM元素直接被移除
- 注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断
v-show：
- 写法：v-show="表达式"
- 适用于：切换频率较高的场景
- 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉。底层实现就是调整display的值

使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到

示例：

<div id="root">
    <h2>当前的n值是:{{n}}</h2>
    <button @click="n++">点我n+1</button>

    <h2 v-show="true">Hello,{{name}}!</h2>

    <div v-if="n === 1">Angular</div>
    <div v-else-if="n === 2">React</div>
    <div v-else>Vue</div>
</div>

11.列表渲染

11.1 基本列表

v-for指令：

用于展示列表数据
语法：<li v-for="(item, index) in xxx" :key="yyy">，其中key可以是index，也可以是遍历对象的唯一标识
可遍历：数组、对象、字符串（用的少）、指定次数（用的少）

<div id="root">
    <h2>列表（遍历数组）</h2>
    <ul>
        <li v-for="(p,index) in persons" :key="index">
            {{p.name}}-{{p.age}}
        </li>
    </ul>

    <h2>信息（遍历对象）</h2>
    <ul>
        <li v-for="(value,k) in car" :key="k">
            {{k}}-{{value}}
        </li>
    </ul>

    <h2>遍历字符串</h2>
    <ul>
        <li v-for="(char,index) in str" :key="index">
            {{char}}-{{index}}
        </li>
    </ul>

    <h2>遍历指定次数</h2>
    <ul>
        <li v-for="(number,index) in 5" :key="index">
            {{index}}-{{number}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            persons:[
                    {id:'001',name:'张三',age:18},
                    {id:'002',name:'李四',age:19},
                    {id:'003',name:'王五',age:20}
            ],
            car:{
                    name:'奥迪A8',
                    price:'70万',
                    color:'黑色'
            },
            str:'hello'
        }
    })
</script>

11.2 key的作用与原理(重点，面试常用)

作用：为每一个元素提供唯一标识原理：

面试题：react、vue中的key有什么作用？（key的内部原理） 虚拟DOM中key的作用：key是虚拟DOM中对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
对比规则：
旧虚拟DOM中找到了与新虚拟DOM相同的key：
若虚拟DOM中内容没变, 直接使用之前的真实DOM
若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
旧虚拟DOM中未找到与新虚拟DOM相同的key：创建新的真实DOM，随后渲染到到页面

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

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

12.列表过滤

<div id="root">
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入名字" v-model="keyWord">
    <ul>
        <li v-for="(p,index) of filPersons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            keyWord:'',
            persons:[
                {id:'001',name:'张三',age:19,sex:'女'},
                {id:'002',name:'李四',age:20,sex:'女'},
                {id:'003',name:'王五',age:21,sex:'男'},
                {id:'004',name:'老六',age:22,sex:'男'}
            ]
            filPersons:[]
    },
    
    //方法一，用监视属性来写
    watch:{
        keyWord:{
            immediate:true,
            handler(val){
                this.filPersons = this.persons.filter((p)=>{
                    return p.name.indexOf(val) !== -1
                })
            }
    }
    
    //方法二，用计算属性来写
    computed:{
        filPersons(){
            return this.persons.filter((p)=>{
                return p.name.indexOf(this.keyWord) !== -1
            })
        }
    }
})
</script>

注意：

filter是过滤器，可以根据条件把不符合的过滤掉。
代码中的参数p是filter自动传入的。
filter根据p中一个对象返回值是FALSE还是TRUE来确定是否返回该对象。

13.列表排序

computed:{
    filPersons(){ //0代表原顺序，1代表升序，3代表降序
        const arr = this.persons.filter((p)=>{
            return p.name.indexOf(this.keyWord) !== -1
        })
        if(this.sortType){
            arr.sort((p1, p2)=>{
                return this.sortType ===1 ? p2.age-p1.age : p1.age-p2.age
            })
        }
        return arr
    }
}