vue笔记2(虚拟dom)

jieyucx

已于 2024-02-20 14:13:21 修改

阅读量826

点赞数 19

分类专栏： vue的那些事文章标签： vue.js 笔记前端

于 2023-11-30 11:33:11 首次发布

本文链接：https://blog.csdn.net/jieyucx/article/details/134708229

版权

vue的那些事专栏收录该内容

54 篇文章 5 订阅

订阅专栏

一、vue中虚拟dom的实现原理是什么，为什么要使用虚拟dom，举例说明

Vue中虚拟DOM的实现原理是通过使用JavaScript对象来描述真实的DOM树结构，并通过对比新旧虚拟DOM树的差异，最小化地更新真实DOM。

使用虚拟DOM的原因有以下几点：

提高性能：真实DOM的更新是非常消耗性能的操作，而虚拟DOM可以通过批量处理和优化算法，将多次的DOM操作合并为一次，从而提高性能。
简化操作：通过使用虚拟DOM，开发者不再需要手动操作真实DOM，只需要操作虚拟DOM，减少了开发的复杂度和出错的可能性。
跨平台能力：虚拟DOM本质上是JavaScript对象，可以在跨平台的环境中运行，比如服务器渲染（SSR）和移动端开发（如React Native）。

举例说明：

假设有一个列表，初始状态下有3个元素。

真实DOM树：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

虚拟DOM树：

{
  tag: 'ul',
  children: [
    { tag: 'li', text: 'Item 1' },
    { tag: 'li', text: 'Item 2' },
    { tag: 'li', text: 'Item 3' }
  ]
}

现在有一个新的需求，要在列表的最前面加入一个新的元素。

更新后的真实DOM树：

<ul>
  <li>Item 0</li>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

更新后的虚拟DOM树：

{
  tag: 'ul',
  children: [
    { tag: 'li', text: 'Item 0' },
    { tag: 'li', text: 'Item 1' },
    { tag: 'li', text: 'Item 2' },
    { tag: 'li', text: 'Item 3' }
  ]
}

通过对比新旧虚拟DOM树的差异，可以得知需要在列表最前面插入一个新元素，然后通过一次真实DOM的操作，就可以完成整个列表的更新。这样就避免了直接操作真实DOM的复杂和性能消耗。

二、vue中的diff算法原理是怎样的，举例说明

Vue中的diff算法是一种虚拟DOM更新的优化策略。它通过比较新旧虚拟DOM树的结构和内容的差异，然后只更新真实DOM中发生变化的部分，从而避免了全量更新整个DOM树的开销，提升了性能。

diff算法的原理大致如下：

对比新旧虚拟DOM树的根节点：
- 如果根节点类型不同，直接用新的虚拟DOM替换旧的虚拟DOM，触发相应的DOM操作来更新视图。
- 如果根节点类型相同，则进入下一步的比较。
对比新旧虚拟DOM树的子节点：
- 首先对两个子节点列表的开始和结束节点进行比较，以及开始和结束节点的相邻节点之间的比较。
- 如果新旧子节点相同，则进行下一轮的比较。
- 如果新旧子节点不同，Vue会根据一些策略选择合适的操作，包括重新创建节点、移动节点、删除节点等。
对比完子节点后，判断是否还有新的子节点：
- 如果旧的子节点已经遍历完，但新的子节点还有剩余，说明这些剩余的新子节点是之前没有的，需要插入到旧节点列表的末尾。
- 如果新的子节点已经遍历完，但旧的子节点还有剩余，说明这些剩余的旧子节点在新的DOM结构中已经不存在，需要从旧节点列表中移除。

通过上述的对比过程，Vue可以确定需要对哪些DOM进行更新操作，从而最小化了对真实DOM的操作，提高了渲染效率。

以下是一个具体的例子：

// 旧的虚拟DOM
const oldVNode = h('div', [
  h('p', 'Hello world'),
  h('ul', [
    h('li', 'Item1'),
    h('li', 'Item2'),
  ])
]);

// 新的虚拟DOM
const newVNode = h('div', [
  h('p', 'Hello Vue'),
  h('ul', [
    h('li', 'Item2'),
    h('li', 'Item3'),
  ])
]);

// 对比新旧虚拟DOM并更新
patch(oldVNode, newVNode);

// 根据diff算法的比较结果，只更新变化的部分：
// 1. 更新了p标签中的文本内容，从'Hello world'变为'Hello Vue'
// 2. 删除了旧的ul列表中的第一个li节点(Item1)
// 3. 添加了新的ul列表中的第二个li节点(Item3)

在这个例子中，Vue通过diff算法对比了旧的虚拟DOM树和新的虚拟DOM树的差异，并只更新了变化的部分，从而提高了性能。

三、既然Vue通过数据劫持可以精准探测数据变化，为什么还需要虚拟DOM进行diff检测差异

虚拟DOM的主要作用是将整个DOM树进行抽象表示，通过对比两个虚拟DOM树的差异来最小化DOM操作，以提高页面渲染的性能。尽管Vue通过数据劫持可以精确探测数据的变化，但是只有监听到数据变化后，才能触发重新渲染，而重新渲染会涉及到对实际的DOM进行操作。

虚拟DOM的diff算法可以高效地计算出两个虚拟DOM树的差异，并且只对差异部分进行更新，避免了大量无效的DOM操作。这样做的好处是减少了实际DOM操作的次数，从而提高了页面渲染的性能。

另外，虚拟DOM还可以对操作进行批量处理，将多个DOM操作合并为一次更新，减少了浏览器的重绘和回流次数，进一步提升了性能。

综上所述，虚拟DOM的diff算法可以更高效地计算出差异，避免大量无效的DOM操作，从而提高了页面渲染的性能，因此它是Vue框架中的重要组成部分。

四、请说明Vue中key的作用和原理，谈谈你对它的理解，举例说明

在Vue中，key是用于唯一标识v-for中渲染的元素的属性。它的作用是帮助Vue跟踪DOM节点的变化，以便高效地复用和重排元素。

key的原理是通过给每个节点一个唯一的标识符来识别节点，当数据发生变化时，Vue会根据新旧节点的key值来判断这个节点是复用还是删除重新创建。当新旧节点有相同的key时，Vue会认为它是同一个节点，会复用之前的真实DOM元素，从而提升渲染的性能；而当新旧节点的key不同时，Vue会将旧节点删除，并重新创建新的节点。

理解key的关键点在于它的唯一性和稳定性。key值在同一层级中必须是唯一的，不能重复，这样Vue才能正确地判断真实DOM的变化。另外，key的稳定性也很重要，相同的数据始终应该有相同的key值，这样才能实现复用节点的效果。

举个例子来说明，假设有一个todoList列表，我们可以使用v-for指令来遍历渲染每个todo项，每个todo项都有一个唯一的id：

<div v-for="todo in todoList" :key="todo.id">
  {{ todo.text }}
</div>

当我们向todoList中添加新的todo项时，只需要在新的todo项上添加新的id，并保持其他的属性不变：

this.todoList.push({
  id: newId,
  text: newText
});

Vue会根据id的唯一性，正确地复用和更新相应的DOM节点，提升页面的渲染性能。而如果我们不使用key属性，Vue将无法正确地跟踪和更新DOM节点，会导致页面渲染不准确甚至出错。

五、vue中key为什么不推荐使用index呢

在Vue中，key是用来标识每个节点的唯一性的。当Vue更新virtual DOM并渲染实际DOM时，会根据key来判断哪些节点是需要更新的，哪些是需要重新渲染的。

使用index作为key存在一些问题：

index不稳定：当数组中的元素发生变化时，元素的位置可能会改变，导致同一个元素的index也发生了变化。如果使用index作为key，可能会导致节点的重新渲染，即使节点内容实际上没有改变。这样会影响性能，也可能导致一些不必要的问题。
index不具有唯一性：在某些情况下，数组中的两个不同元素可能有相同的值。如果使用index作为key，可能会导致混淆，从而导致错误的渲染结果。

所以，不推荐使用index作为key，而是应该使用稳定且具有唯一性的值作为key，比如每个元素的唯一标识符。这样可以确保在更新virtual DOM时，能够正确地判断哪些节点需要更新，从而提高性能并避免一些问题。
在这里插入图片描述

在 Vue 中，每个 v-for 循环都要求为每个项提供一个唯一的 key 属性。这样 Vue 才能跟踪每个节点的身份，并在重新渲染时复用和重新排序相应的元素。key 的作用是帮助 Vue 识别每个节点的身份，从而进行高效的更新。

使用数组索引作为 key 不是一个推荐的做法，因为索引本身可能发生变化。如果通过对数组进行增删操作，会导致被渲染的元素重新排列，但是 Vue 并不知道哪个元素发生了改变，从而无法更新对应的 DOM 节点。这可能会导致一些意料之外的行为，如修改了一个项，但是并没有更新对应的 DOM 元素。

举个例子，假设有如下代码：

<ul>
  <li
    v-for="(item, index) in items"
    :key="index"
    @click="removeItem(index)"
  >
    {{ item }}
  </li>
</ul>

<button @click="addItem">Add Item</button>

export default {
  data() {
    return {
      items: ['A', 'B', 'C']
    };
  },
  methods: {
    addItem() {
      this.items.push('D');
    },
    removeItem(index) {
      this.items.splice(index, 1);
    }
  }
};

上述代码实现了一个列表，可以通过点击列表项删除该项，同时还有一个按钮可以添加新的项。如果使用索引作为 key，当我们点击删除按钮时，Vue 无法正确地识别哪个元素被删除了。假设我们删除位于中间的项 ‘B’，DOM 中的元素将会重新排序为 ‘A’，‘C’，‘D’。但是 Vue 并不知道哪个 DOM 元素发生了改变，因此会错误地删除 ‘C’。