一、条件渲染

某些情况下，我们需要根据当前的条件决定某些元素或组件是否渲染，这个时候我们就需要进行条件判断了

Vue 提供了下面的指令来进行条件判断：

v-if

v-else

v-else-if

v-show

v-if、v-else、v-else-if

v-if、v-else、v-else-if 用于根据条件来渲染某一块的内容

这些内容只有在条件为 true 时，才会被渲染出来

这三个指令与 JavaScript 的条件语句 if、else、else if 类似

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template id="my-app">
  <input type="text" v-model="score" />
  <h2 v-if="score > 90">优秀</h2>
  <h2 v-else-if="score > 60">良好</h2>
  <h2 v-else>不及格</h2>
</template>

<script src="../js/vue.js"></script>
<script>
const App = {
  template: "#my-app",
  data() {
    return {
      score: 95,
    };
  },
};
Vue.createApp(App).mount("#app");
</script>

v-if 的渲染原理：

  • v-if 是惰性的
  • 当条件为 false 时，其判断的内容完全不会被渲染或者会被销毁掉
  • 当条件为 true 时，才会真正渲染条件块中的内容

template 元素

因为 v-if 是一个指令，所以必须将其添加到一个元素上

但是如果我们希望切换的是多个元素呢？

此时我们渲染 div，但是我们并不希望 div 这种元素被渲染到页面上

这个时候，我们可以选择使用 template

template 元素可以当做不可见的包裹元素，并且在 v-if 上使用，但是最终 template 不会被渲染出来

有点类似于小程序中的 block

1
2
3
4
5
6
7
8
9
10
11
12
13
<template id="my-app">
  <template v-if="isShowHa">
    <h2>哈哈哈哈</h2>
    <h2>哈哈哈哈</h2>
    <h2>哈哈哈哈</h2>
  </template>

  <template v-else>
    <h2>呵呵呵呵</h2>
    <h2>呵呵呵呵</h2>
    <h2>呵呵呵呵</h2>
  </template>
</template>

可见 template 没有被渲染，如果换做 div，就会多了几层嵌套。

v-show

v-show 和 v-if 的用法看起来是一致的，也是根据一个条件决定是否显示元素或者组件

v-show 和 v-if 的区别

在用法上的区别：

  • v-show 是不支持 template
  • v-show 不可以和 v-else 一起使用

其次，本质的区别：

  • v-show 元素无论是否需要显示到浏览器上，它的 DOM 实际都是有渲染的，只是通过 CSS 的 display 属性来进行切换
  • v-if 当条件为 false 时，其对应的元素压根不会被渲染到 DOM 中

开发中如何进行选择呢？

  • 如果我们的元素需要在显示和隐藏之间频繁的切换，那么使用 v-show
  • 如果不会频繁的发生切换，那么使用 v-if

二、列表渲染

真实开发中，我们往往会从服务器拿到一组数据，并且需要对其进行渲染。

这个时候我们可以使用 v-for 来完成

v-for 类似于 JavaScript 的 for 循环，可以用于遍历一组数据

v-for 的基本格式是 “item in 数组”

数组通常是来自 data 或者 prop，也可以是其他方式

item 是我们给每项元素起的一个别名，这个别名可以自定来定义

我们知道，在遍历一个数组的时候会经常需要拿到数组的索引

如果我们需要索引，可以使用格式： “(item, index) in 数组”

注意上面的顺序：数组元素项 item 是在前面的，索引项 index 是在后面的

1
2
3
4
5
<h2>电影列表</h2>
<ul>
      <!-- 遍历数组 -->
      <li v-for="(item,index) in movies">{{index + 1}}---{{item}}</li>
    </ul>

v-for 支持的类型

v-for 也支持遍历对象，并且支持有一二三个参数：

  • 一个参数： “value in object”
  • 二个参数： “(value, key) in object”
  • 三个参数： “(value, key, index) in object”

v-for 同时也支持数字的遍历： 每一个 item 都是一个数字

1
2
3
4
5
6
7
8
9
10
<h2>个人信息</h2>
<ul>
      <!-- 遍历对象 -->
      <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
    </ul>

<h2>遍历数字</h2>
<ul>
      <li v-for="(num, index) in 5">{{num}}-{{index}}</li>
    </ul>

template 元素

类似于 v-if，你可以使用 template 元素来循环渲染一段包含多个元素的内容

使用 template 来对多个元素进行包裹，而不是使用 div 来完成

数组更新检测

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

这些被包裹过的方法包括：

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

替换数组的方法

  • 上面的方法会直接修改原来的数组，但是某些方法不会替换原来的数组
  • 而是会生成新的数组，比如 filter()、 concat() 和 slice()

三、虚拟 Dom

在使用 v-for 进行列表渲染时，我们通常会给元素或者组件绑定一个 key 属性

这个 key 属性有什么作用呢，看一下官方的解释：

  • key 属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes
  • 如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法
  • 而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除/销毁 key 不存在的元素

官方的解释对于初学者来说并不好理解，比如下面的问题：

  • 什么是新旧 nodes，什么是 VNode？
  • 没有 key 的时候，如何尝试修改和复用的？
  • 有 key 的时候，如何基于 key 重新排列的？

VNode

目前我们还没有比较完整的学习组件的概念，所以目前我们先理解 HTML 元素创建出来的 VNode

VNode 的全称是 Virtual Node，也就是虚拟节点

事实上，无论是组件还是元素，它们最终在 Vue 中表示出来的都是一个个 VNode

1
<div class="title" style="font-size:30px;color:red;">哈哈哈</div?

VNode 的本质是一个 JavaScript 的对象

虚拟 DOM

如果我们不只是一个简单的 div，而是有一大堆的元素，那么它们应该会形成一个 VNode Tree：

插入 f 案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<template id="my-app">
  <ul>
    <li v-for="item in letters" :key="item">{{ item }}</li>
  </ul>
  <button @click="insertF">插入F元素</button>
</template>

<script src="../js/vue.js"></script>
<script>
const App = {
  template: "#my-app",
  data() {
    return {
      letters: ["a", "b", "c", "d"],
    };
  },
  methods: {
    insertF() {
      this.letters.splice(2, 0, "f");
    },
  },
};

Vue.createApp(App).mount("#app");
</script>

可以确定的是，这次更新对于 ul 和 button 是不需要进行更新，需要更新的是我们 li 的列表

在 Vue 中，对于相同父元素的子元素节点并不会重新渲染整个列表

因为对于列表中 a、b、c、d 它们都是没有变化的

在操作真实 DOM 的时候，我们只需要在中间插入一个 f 的 li 即可

那么 Vue 中对于列表的更新究竟是如何操作的呢

Vue 事实上会对于有 key 和没有 key 会调用两个不同的方法

  • 有 key，那么就使用 patchKeyedChildren 方法
  • 没有 key，那么就使用 patchUnkeyedChildren 方法

没有 key 的过程

c 和 d 来说它们事实上并不需要有任何的改动

但是因为我们的 c 被 f 所使用了，所有后续所有的内容都要一次进行改动，并且最后进行新增

有 key 的过程

第一步的操作是从头开始进行遍历、比较：

  • a 和 b 是一致的会继续进行比较；
  • c 和 f 因为 key 不一致，所以就会 break 跳出循环

第二步的操作是从尾部开始进行遍历、比较：同上

第三步是如果旧节点遍历完毕，但是依然有新的节点，那么就新增节点

第四步是如果新的节点遍历完毕，但是依然有旧的节点，那么就移除旧节点

第五步是最特色的情况，中间还有很多未知的或者乱序的节点

Vue 在进行 diff 算法的时候，会尽量利用我们的 key 来进行优化操作

在没有 key 的时候我们的效率是非常低效的

在进行插入或者重置顺序的时候，保持相同的 key 可以让 diff 算法更加的高效

所以看下 v-for 种的 key 的作用

官方的解释：

key 属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes

如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法

  • 比如把 c 改为 f d 改为 c 新增 d

而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除/销毁 key 不存在的元素

  • c d 都没变，只是新增了 f