VUE学习（三） | 青训营笔记

魔法少女蕊蕊
75 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第12天

（接上文）

今天继续复习整理了vue的学习笔记，做项目的时候也是发现，基础不牢地动山摇是真的，所以应该从刚开始学的时候就打好基础，尤其是js基础。

1.13. 列表渲染

1.13.1. 基本列表

v-for指令：

  1. 用于展示列表数据
  2. 语法：<li v-for="(item, index) in xxx" :key="yyy">，其中key可以是index，也可以是遍历对象的唯一标识
  3. 可遍历：数组、对象、字符串（用的少）、指定次数（用的少）
<h2>人员列表（遍历数组）</h2> 
<ul> 
    <li v-for="(p,index) in persons" :key="index"> 
    {{p.name}}-{{p.age}} 
    </li> 
</ul>

1.13.2. key的作用与原理

原理

image.png

image.png

一道面试题：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可能会引发的问题：

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

  4. 开发中如何选择key?

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

1.13.3. 列表过滤

computed:{
    filPersons(){
	return this.persons.filter((p)=>{
            return p.name.indexOf(this.keyWord) !== -1
	})
    }
}

1.13.4. 列表排序

<body>
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="sortType = 2">年龄升序</button>
		<button @click="sortType = 1">年龄降序</button>
		<button @click="sortType = 0">原顺序</button>
        <ul>
            <li v-for="(p,index) of filPersons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>
    
    <script>
        new Vue({
            el:'#root',
            data:{
                persons:[
                    {id:'001',name:'马冬梅',age:30,sex:'女'},
                    {id:'002',name:'周冬雨',age:45,sex:'女'},
                    {id:'003',name:'周杰伦',age:21,sex:'男'},
                    {id:'004',name:'温兆伦',age:22,sex:'男'}
                ],
                keyWord:'',
                sortType:0,//0代表原顺序，1代表升序，3代表降序
            },
            computed:{
                filPersons(){
                    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
                }
            }
        })
    </script>
</body>

1.13.5. Vue数据监视

  • Vue监视数据的原理：

    • vue会监视data中所有层次的数据

    • 如何监测对象中的数据？

      通过setter实现监视，且要在new Vue时就传入要监测的数据

    1. 对象中后追加的属性，Vue默认不做响应式处理
    2. 如需给后添加的属性做响应式，请使用如下API：
      • Vue.set(target,propertyName/index,value)
      • vm.$set(target,propertyName/index,value)

    • 如何监测数组中的数据？

      通过包裹数组更新元素的方法实现，本质就是做了两件事：

        1. 调用原生对应的方法对数组进行更新
  2. 重新解析模板，进而更新页面

    • 在Vue修改数组中的某个元素一定要用如下方法：

      1. 使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
      2. Vue.set() 或 vm.$set()

  • 特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象（data等） 添加属性

1.14. 收集表单数据

收集表单数据：

  • 若：<input type="text"/>，则v-model收集的是value值，用户输入的内容就是value值
  • 若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value属性
  • 若：<input type="checkbox"/>
    • 没有配置value属性，那么收集的是checked属性（勾选 or 未勾选，是布尔值）
    • 配置了value属性：
      • v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
      • v-model的初始值是数组，那么收集的就是value组成的数组 v-model的三个修饰符：
  1. lazy：失去焦点后再收集数据
  2. number：输入字符串转为有效的数字
  3. trim：输入首尾空格过滤

1.15. 过滤器

过滤器：

  • 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

  • 语法：

    • 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}

    • 使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

备注：

  1. 过滤器可以接收额外参数，多个过滤器也可以串联
  2. 并没有改变原本的数据，而是产生新的对应的数据
avatar
文章
阅读
粉丝