Vue学习笔记-key的原理和作用

最新推荐文章于 2024-07-11 11:14:36 发布

卿卿&

最新推荐文章于 2024-07-11 11:14:36 发布

阅读量215

点赞数

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

本BLOG上原创文章未经本人许可，不得用于商业用途。转载请注明出处，否则保留追究法律责任的权利。”

本文链接：https://blog.csdn.net/qq_45773423/article/details/120966727

版权

Vue学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

条件渲染

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:none,仅仅是使用样式隐藏掉。
备注：

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

列表渲染

v-for指令

用于展示列表数据

语法：v-for="(item ,index) in xxx" :key=“yyy”

可遍历：数组、对象、字符串(用的很少) 、指定次数(用的很少)

key的原理和作用

面试题：react、vue中的key有什么作用？

虚拟DOM中的key作用：

key是虚拟dom对象的标识，当状态中的数据发生变化时，Vue会根据[新数据]生成[新的虚拟dom],随后Vue进行[新虚拟dom]与[旧虚拟dom]的差异比较。比较规则如下：
对比原则：
1. 旧虚拟dom中找到了与新虚拟dom相同的key:
  
  若虚拟dom中的内容没有变，直接使用之前的真实dom
  
  若虚拟dom中的内容变了，则生成新的真实dom,随后替换页面之前的真实dom.
2. 旧虚拟dom中未找到与新虚拟dom相同的key
  
  创建新的真实dom，随后渲染到页面。
用index作为key可能会引发的问题：
1. 若对数据进行：逆序添加、删除等破坏顺序操作：
  
  会产生没有必要的真实dom更新===>界面效果没有问题，但效率低。
2. 如果结构中还包含输入类的dom:
  
  会产生错误的DOM更新===>界面有问题
开发中如何选择key?
1. 最好使用每条数据的唯一标识作为key,比如id,手机号，身份证号、学号等唯一值。
2. 如果不存在对数据的逆序添加，删除等破坏顺序的操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
理解：

在这里插入图片描述

6. 代码：

<!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>Document</title>
   <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <h2>人员列表-遍历数组</h2>
    <button @click="add">添加老刘</button>
   <ul>
     <li v-for="(p,index) in persons" :key="p.id">{{p.name}}-{{p.age}}
        <input type="text">
     </li>
   </ul>
   
  </div>
  <script>
   Vue.config.productionTip = false //阻止vue在启动时生成生产提示
     const vm = new Vue({
          el: '#root',
          data: {
              persons:[
                {id:'001',name:'张三',age:18},
                {id:'002',name:'李四',age:19},
                {id:'003',name:'王五',age:28}
              ]
          },
          methods:{
            add(){
              const p = {id:'004',name:'老刘',age:40}
              //把它添加到第一个
              this.persons.unshift(p)
            }
        
          }

      })
  </script>
</body>
</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>Document</title>
   <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
  <div id="root">
   <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) in filPerson" :key="p.id">{{p.name}}-{{p.age}}
     </li>
   </ul>
   
  </div>
  <script>
   Vue.config.productionTip = false //阻止vue在启动时生成生产提示
     const vm = new Vue({
          el: '#root',
          data: {
            keyWord:'',
            sortType:0,
              persons:[
                {id:'001',name:'马冬梅',age:30},
                {id:'002',name:'周冬雨',age:19},
                {id:'003',name:'周杰伦',age:28},
                {id:'003',name:'温伦',age:50}
              ]
          },
         computed:{
           filPerson(){
            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>
</html>

卿卿&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记-key的原理和作用

文章目录条件渲染列表渲染key的原理和作用列表过滤条件渲染v-if:写法：v-if=“表达式”v-else-if =“表达式”v-else=“表达式”适用于：切换频率较低的场景特点：不展示DOM元素直接被移除。注意：v-if可以和v-else-if、v-else 一起使用，但要求不能被打断。v-show写法：v-show =“表达式”适用于：切换频率较高的场景特点：不展示dom元素，但未被移除，底层原理是display:none,仅仅是使用样式隐藏掉。备注：使用
复制链接

扫一扫