Vue-条件,列表渲染-key的底层原理

阿选不出来

已于 2022-09-25 01:04:48 修改

阅读量1k

点赞数 52

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

于 2022-09-15 22:19:00 首次发布

本文链接：https://blog.csdn.net/m0_63300737/article/details/126880637

版权

Vue 专栏收录该内容

8 篇文章 6 订阅

订阅专栏

前言

🚩🚩🚩
💎个人主页: 阿选不出来
💨💨💨
💎个人简介: 一名大二在校生, 不定时更新自己学习道路上的一些笔记.
💨💨💨
💎目前开发的专栏: JS 🍭Vue🍭JS进阶
💨💨💨
💎接上一篇 Vue-模板语法-计算属性与监听属性的介绍和差异

一.class与style绑定

操作元素的class列表和内联样式是数据绑定的一个常见需求.我们很容易想到用 v-bind 来添加这些属性(通过表达式计算出字符串即可).

但是这样做的弊端无疑就是拼接字符串很麻烦. 因此,vue.js 在使用 v-bind 进行class 与 style 绑定的时候,做出了如下改变:

表达式结果的类型除了字符串以外,还可以是数组或者对象的形式.

绑定 HTML Class

对象语法

适用于: 要绑定多个样式, 个数不确定, 名字也不确定

绑定一个class
- HTML: <div :class="{active: isActive}"></div>
- data: data: {isActive: true}
- 结果: <div class="active"></div>
绑定多个class
- HTML: <div :class="{active: isActive, 'text-danger': hasError}"></div
- data: data: {isActive: true, hasError: false}
- 结果: <div class="active"></div>
  
  注意: 如果绑定的class类很多,我们也可以只绑定一个样式对象,例
  
  html: <div :class="{classObj}"></div>
  
  data: data: {classObj:{active: true, text-danger: false}}
绑定一个返回对象的计算属性
- HTML: <div :class="classObject"></div>
- 结果:
```
computed: {
	classObject: function(){
		return {
			//...
		} 
	}
}
```
  增大了class绑定的灵活性.

数组语法

绑定一个或多个属性
- HTML: <div :class="[activeClass, errorClass]"></div>
- data: data: {activeClass: 'active',errorClass: 'text-danger'}
- 结果: <div class="active text-danger"></div>
数组元素还可以是三元表达式
- HTML: <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

多重值

从2.3.0起你可以为 style绑定中的 property 提供一个包含多个值的数组, 常用于提供多个带前缀的值:

eg: <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

二.条件渲染

v-if

作用

v-if 指令用于条件渲染一块内容.这块内容只会在指令的表达式返回 truthy 值得时候被渲染.

写法

v-if
v-else-if
v-else

注意: v-if可以和v-else-if, v-else一起使用, 但要求结构不能被"打断"

分组条件渲染

在 <template> 元素上使用 v-if 条件渲染分组.

因为 v-if 是一个指令,所以必须将它添加到一个元素上.但如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素, 并在上面使用 v-if.

最终的渲染结果将不包含 <template> 元素.

例子:

<template v-if='ok'>
	<h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</template>

用key 管理元素的复用

Vue会尽可能高效地渲染元素, 通常会复用已有元素而不是从头开始渲染.这么做除了使Vue变得非常快之外,还有一点好处,例如, 如果你允许用户在不同登录之间相互切换:

<template v-if="loginType === username">
	<label>UserName</label>
    <input placeholder="Enter your username">
</template>
<template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address">
</template>

在上面的代码中切换 loginType 将不会清除用户已经输入的内容.因为两个模板使用了相同的元素, input 不会被替换掉—仅仅是替换了它的 placeholder.

这样也不总是符合实际需求, 所以Vue为你提供了一种方式来表达 “这两个元素是完全独立的, 不要复用他们” . 只需添加一个具有唯一值的key 属性即可.

<template v-if="loginType === username">
	<label>UserName</label>
    <input placeholder="Enter your username">
</template>
<template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address">
</template>

注意: 元素仍然会被高效复用,因为他们没有添加 key 属性.

v-show

v-show大致用法与v-if相同,不同的是: v-show 的元素会始终被渲染并保留在DOM中.

v-show 只是简单地切换元素的 CSS 的 display属性.

v-if VS v-show

v-if 是"真正"的条件渲染, 因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.
v-if 也是惰性的: 如果在初始渲染时条件为假,则什么也不做—直到条件第一次变为真时,才会开始渲染条件块.
相比之下, v-show 就简单得多–不管初始条件是什么,元素总会被渲染,并且只是简单地基于CSS进行切换.
一般来说, v-if 有更高地切换开销, 而 v-show 有更高地初始渲染开销.因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,使用 v-if较好.

v-if 与 v-for 一起使用

当 v-if 与 v-for 一起使用,v-for 具有比 v-if 更高地优先级.

三.列表渲染

v-for

在数组中

v-for="(item[,index] in items)"

items 是源数据数组, 而 item 则是被迭代的数组元素的别名, index为可选参数代表每一项的索引值.

在对象中

v-for="(value[, name, index]) in object"

object是源数据对象, value 则是每一个对象的值, name表示每一个对象的键名, index 表示当前对象的索引值.

维护状态

当Vue正在更新使用 v-for渲染的元素列表时, 它默认使用 "就地更新"的策略.如果数据项的顺序被改变, Vue将不会移动DOM元素来匹配数据项的顺序, 而是就地更新每个元素, 并且确保他们在每个索引位置正确渲染.

这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时DOM状态(例如: 表单输入值)的列表渲染输出.

为了给Vue一个提示, 以便它能跟踪每个节点的身份,从而重用和重新排序现有的元素,你需要为每项提供一个唯一 key 属性.

例:

<div v-for="item in items" v-bind:key="item.id">
    <!-- .. -->
</div>

(key 的内部原理)

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

数组更新检测

变更方法

Vue将被侦听的数组的变更方法进行了包裹, 所以他们也将会触发视图更新.

push(), pop(), shift(), unshift(), splice(), sort(), reverse()

替换数组

filter() , concat(), slice() …这些方法不会变更原始数组, 而总是返回一个新数组.

当使用非变更方法时, 可以用新数组替换旧数组.

📢📢📢写在最后

看到这里有没有收获什么呢?🎀🎀🎀
🎈🎈有错误的地方可以在评论区留言,本博会虚心改正的
觉的博主写的不错的,可以给个一键三连lia~✨✨