专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

Web前端面试题之Vue面试题答案及解析说明

ins518 2024-10-10 10:03:53 技术文章 16 ℃ 0 评论


你知道vue中key的作用和工作原理吗？说说你对它的理解。

源码中找答案：src\core\vdom\patch.js - updateChildren()

测试代码如下

```html

<!DOCTYPE html>

<html>

<head>

<title>03-key的作用及原理?</title>

</head>

<body>

<div id="demo">

<p v-for="item in items" :key="item">{{item}}</p>

</div>

<script src="../../dist/vue.js"></script>

<script>

// 创建实例

const app = new Vue({

el: '#demo',

data: { items: ['a', 'b', 'c', 'd', 'e'] },

mounted () {

setTimeout(() => {

this.items.splice(2, 0, 'f')

}, 2000);

},

});

</script>

</body>

</html>

```

上面案例重现的是以下过程

![img](assets/v2-6e88cc53a7e427f0ae8340cf930ac30d_hd.jpg)

不使用key

![img](assets/v2-bf76311258f100b789226ccbb2600071_hd.jpg)

如果使用key

```

// 首次循环patch A

A B C D E

A B F C D E

// 第2次循环patch B

B C D E

B F C D E

// 第3次循环patch E

C D E

F C D E

// 第4次循环patch D

C D

F C D

// 第5次循环patch C

C

F C

// oldCh全部处理结束，newCh中剩下的F，创建F并插入到C前面

```

**结论**

1. key的作用主要是为了高效的更新虚拟DOM，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。

2. 另外，若不设置key还可能在列表更新时引发一些隐蔽的bug

3. vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

你怎么理解vue中的diff算法？


源码分析1：必要性，lifecycle.js - mountComponent()

组件中可能存在很多个data中的key使用

源码分析2：执行方式，patch.js - patchVnode()

patchVnode是diff发生的地方，整体策略：深度优先，同层比较

源码分析3：高效性，patch.js - updateChildren()

测试代码：

```html

<!DOCTYPE html>

<html>

<head>

<title>Vue源码剖析</title>

<script src="../../dist/vue.js"></script>

</head>

<body>

<div id="demo">

<h1>虚拟DOM</h1>

<p>{{foo}}</p>

</div>

<script>

// 创建实例

const app = new Vue({

el: '#demo',

data: { foo: 'foo' },

mounted() {

setTimeout(() => {

this.foo = 'fooooo'

}, 1000);

}

});

</script>

</body>

</html>

```

**总结**

1.diff算法是虚拟DOM技术的必然产物：通过新旧虚拟DOM作对比（即diff），将变化的地方更新在真实DOM上；另外，也需要diff高效的执行对比过程，从而降低时间复杂度为O(n)。

2.vue 2.x中为了降低Watcher粒度，每个组件只有一个Watcher与之对应，只有引入diff才能精确找到发生变化的地方。

3.vue中diff执行的时刻是组件实例执行其更新函数时，它会比对上一次渲染结果oldVnode和新的渲染结果newVnode，此过程称为patch。

4.diff过程整体遵循深度优先、同层比较的策略；两个节点之间比较会根据它们是否拥有子节点或者文本节点做不同操作；比较两组子节点是算法的重点，首先假设头尾节点可能相同做4次比对尝试，如果没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点；借助key通常可以非常精确找到相同节点，因此整个patch过程非常高效。

以上就是酷仔今日整理的“Web前端面试题之Vue面试题答案及解析说明”希望为准备面试Web前端工程师的同学提供参考。本文整理了Vue两道题，可承接上一篇酷仔发布的Web面试题内容进行学习，希望每位同学都能找到一份理想的工作。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表