• Vue.js 条件判断，循环遍历，key，虚拟DOM

     一，条件判断

    1，v-if   

            单独使用v-if，变量为布尔值，为true才渲染DOM

    <h1 v-if="isScore"> v-if 这次测验熏悟空考了: {{score}}分h1>

    2，v-if ，v-else-if，v-else

            联合使用相当于if、elseif、else，但是在条件比较多的时候建议使用计算属性。

    1.         <h1 v-if="score<60">分数小于60分h1>
    2.         <h1 v-else-if="score<90">分数大于60分 小于90分h1>
    3.         <h1 v-else="">不及格h1>

    3，v-show

            通过样式display:block来显示 当值为假时，通过display:none来隐藏

      <h2 v-show="isShow">v-show 我只是隐藏了h2>

    4，v-if 与v-show的区别

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <script src="./vue.js">script>
    10. head>
    11.  
    12. <body>
    13.     <div id="app"> 
    14.         
    15.         
    16.         <h1 v-if="isScore"> v-if 这次测验熏悟空考了: {{score}}分h1>
    17.         
    18.         <h2 v-show="isShow">v-show 我只是隐藏了h2>
    19.         <button @click="isScore=!isScore,isShow=!isShow">切换button>
    20.         <hr>
    21.         
    22.         <h1 v-if="score<60">分数小于60分h1>
    23.         <h1 v-else-if="score<90">分数大于60分 小于90分h1>
    24.         <h1 v-else="">不及格h1>
    25.     div>
    26.     <script>
    27.         var vm = new Vue({
    28.             el: '#app',
    29.             data() {
    30.                 return {
    31.                     score: 50,
    32.                     isScore: true,
    33.                     isShow: true
    34.                 }
    35.             }
    36.  
    37.         })
    38.     script>
    39. body>
    40.  
    41. html>

     由此我们的到结论如下

    ​1. v-if       在首次渲染的时候，如果条件为假，什么也不操作，页面当作没有这些元素。当条件为真的时候，开始局部编译，动态的向DOM元素里面添加元素。当条件从真变为假的时候，开始局部编译，卸载这些元素，也就是删除。

    说白了就是当布尔值为真的时候，向DOM元素中添加元素，布尔值为假的时候 卸载元素或者说删除元素

    2.​ v-show   不管条件是真还是假，第一次渲染的时候都会编译出来，也就是标签都会添加到DOM中。之后切换的时候，通过display: none;样式来显示隐藏元素。可以说只是改变css的样式，几乎不会影响什么性能。

    简而言之 就是  布尔值为真时，通过样式display:block来显示 值为假时，通过display:none来隐藏

    二，循环遍历  

    1.v-for遍历数组

     ​  一般需要使用索引值。 index表示索引，item表示当前遍历的元素。

    <li v-for="(item,index) in names" >{{index+":"+item}}li>

                    来吧直接上代码，操作起来

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         
    14.         <ul>
    15.             <li v-for="item in names">{{item}}li>
    16.         ul>
    17.         
    18.         <ul>
    19.             <li v-for="(item,index) in names">{{index+":"+item}}li>
    20.         ul>
    21.     div>
    22.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    23.     <script>
    24.         const app = new Vue({
    25.             el: "#app",
    26.             data: {
    27.                 names: ["zzz", "ttt", "yyy"]
    28.             }
    29.         })
    30.     script>
    31. body>
    32.  
    33. html>

      2，v-for遍历对象

            遍历过程使用index索引，index表示索引从0开始。

            item表示当前元素是属性值，key表示user对象属性名。

    <li v-for="(item,key) in user" >{{key+"-"+item}}li>
    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         
    14.         
    15.         <ul>
    16.             <li v-for="(item,key) in user">{{key+"-"+item}}li>
    17.         ul>
    18.         
    19.         <ul>
    20.             <li v-for="(item,key,index) in user">{{key+"-"+item+"-"+index}}li>
    21.         ul>
    22.  
    23.     div>
    24.     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    25.     <script>
    26.         const app = new Vue({
    27.             el: "#app",
    28.             data: {
    29.                 user: {
    30.                     name: "zzz",
    31.                     height: 188,
    32.                     age: 24
    33.                 }
    34.             }
    35.         })
    36.     script>
    37. body>
    38.  
    39. html>

    3，v-for加key与不加

    三，key

    1，什么是key？

    ①，当我们在使用v-for时，需要给单元加上key

    <li v-for="item in items" :key="item.id">什么是key值li>

    ②，用+new Date()生成的时间戳作为key，手动强制触发重新渲染

    <Comp :key="+new Date()" />

    2，key值得作用是什么？

    简单的来讲 key 就是给节点添加一个唯一值，能让浏览器引擎 快速，准确无误找到节点

    3，设置key与不设置key区别

    给v-for需要给单元加上key

    创建一个实例，3秒后往items数组插入数据

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9.     <script src="../Vue/vue.js">script>
    10. head>
    11.  
    12. <body>
    13.     <div id="demo">
    14.       <p v-for="(item,index) in items" :key="item">{{item}}---{{index}}p>
    15.     div>
    16.     <script>
    17.       // 创建实例
    18.       const app = new Vue({
    19.         el: '#demo',
    20.         data: { items: ['a', 'b', 'c', 'd', 'e'] },
    21.         mounted () {
    22.           setTimeout(() => { 
    23.             this.items.splice(2, 0, 'f')  // 
    24.          }, 3000);
    25.        },
    26.      });
    27.     script>
    28.  
    29.   body>
    30.  
    31. html>

    效果图展示 

    在不使用key的情况，vue会进行这样的操作：

    分析下整体流程：

    • 比较A，A，相同类型的节点，进行patch，但数据相同，不发生dom操作
    • 比较B，B，相同类型的节点，进行patch，但数据相同，不发生dom操作
    • 比较C，F，相同类型的节点，进行patch，数据不同，发生dom操作
    • 比较D，C，相同类型的节点，进行patch，数据不同，发生dom操作
    • 比较E，D，相同类型的节点，进行patch，数据不同，发生dom操作
    • 循环结束，将E插入到DOM中

    一共发生了3次更新，1次插入操作

    在使用key的情况：vue会进行这样的操作：

    • 比较A，A，相同类型的节点，进行patch，但数据相同，不发生dom操作
    • 比较B，B，相同类型的节点，进行patch，但数据相同，不发生dom操作
    • 比较C，F，不相同类型的节点
    • 比较E、E，相同类型的节点，进行patch，但数据相同，不发生dom操作
    • 比较D、D，相同类型的节点，进行patch，但数据相同，不发生dom操作
    • 比较C、C，相同类型的节点，进行patch，但数据相同，不发生dom操作
    • 循环结束，将F插入到C之前

    一共发生了0次更新，1次插入操作

    四，虚拟DOM

    1，什么是虚拟DOM

    虚拟dom 其实就是一个普通的JavaScript对象，用来描叙试图上有哪些界面结构，并不生成界面，我们可以在生命周期【mounted阶段】打印this._vnode，如下：

    它描叙了该阶段是div,有 哪些子节点，哪些属性，它是采用一个js对象来描叙这些，但是它并不会显示在页面上。

     

     在vue中，每一个组件都有一个render函数，这个函数会生成一个虚拟dom，这就意味着每一个组件都对应一个虚拟dom树。

    2、为什么需要虚拟DOM？

    这个主要是由vue结构所决定的，在vue中，渲染试图会调用render函数，不仅在创建视图的时候被调用，当组件所依赖的数据或者属性发生了改变的时候，也会调用render函数，如果是使用真实的dom，当创建，修改，删除，插入dom的话是非常消耗性能的，

    如下所示，当修改一个js对象远比操作真实的dom要有效率的多。

            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是没有问题的。

  • 相关阅读:
    避坑手册 | JAVA编码中容易踩坑的十大陷阱
    【2022】Nginx使用相应模块做出访问限制
    第七章TCP/IP——ARP网络攻击与欺骗
    EureKa详解：微服务发现与注册的利器
    DTS搭载全新自研内核，突破两地三中心架构的关键技术｜腾讯云数据库
    关于http测试总结
    tf.metrics
    React Native项目接入Sentry指南
    RabbitMQ之死信队列
    开源项目研读AXIOM camera
  • 原文地址：https://blog.csdn.net/qq_52499703/article/details/126128370