Web前端面试题之Vue面试题答案及解析说明
sinye56 2024-10-26 14:43 5 浏览 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>
```
上面案例重现的是以下过程
不使用key
如果使用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面试题内容进行学习，希望每位同学都能找到一份理想的工作。
相关推荐
- Linux两种光驱自动挂载的方法
-
环境：CentOS6.4西昆云服务器方式一修改fstab文件/etc/fstab是系统保存文件系统信息?静态文件，每一行描述一个文件系统；系统每次启动会读取此文件信息以确定需要挂载哪些文件系统。参...
- linux系统运维，挂载和分区概念太难?在虚机下操作一次全掌握
-
虚拟机的好处就是可以模拟和学习生产环境的一切操作，假如我们还不熟悉磁盘操作，那先在虚机环境下多操作几次。这次来练习下硬盘扩容操作。虚拟机环境：centos8vm11linux设备命名规则在linux中...
- Linux 挂载 NFS 外部存储 (mount 和 /etc/fstab)
-
mount:手工挂载，下次重启需再重新挂载，操作命令：mount-tnfs-ooptionsserver:/remote/export/local/directory上面命令中，本地目录...
- 在Linux中如何设置自动挂载特定文件系统(示例)
-
Linux...
- Linux环境中的绑定挂载(bind mount)
-
简介：Linux中的mount命令是一个特殊的指令，主要用于挂载文件目录。而绑定挂载（bindmount）命令更为特别。mount的bind选项将第一个目录克隆到第二个。一个目录中的改变将会在...
- Linux挂载CIFS共享 临时挂载 1. 首先
-
如何解决服务器存储空间不足的问题？大家好，欢迎回来。在上一期视频中，我为大家介绍了如何利用Linux挂载来扩容服务器存储空间。这一期视频，我将以Linux为例，教大家如何进行扩容。群辉使用的是Linu...
- Linux 硬盘挂载(服务器重启自动挂载)
-
1、先查看目前机器上有几块硬盘，及已挂载磁盘：fdisk-l能够查看到当前主机上已连接上的磁盘，以及已经分割的磁盘分区。（下面以/dev/vdb磁盘进行分区、挂载为例，挂载点设置为/data）df...
- linux 挂载磁盘
-
在Linux中挂载硬盘的步骤如下：...
- 笨小猪教您Linux磁盘挂载
-
本教程针对Linux系统比较熟悉或者想学习Linux基础的用户朋友，本教程操作起来比较傻瓜式，跟着步骤就会操作，本文使用的工具是XShell同时多多注意空格（文中会有提示）。【问答】什么是磁盘挂载？答...
- Linux 磁盘挂载和docker安装命令
-
本篇给大家介绍Linux磁盘挂载和docker安装的相关内容，Linux服务器的操作是一个手熟的过程，一些不常用的命令隔断时间就忘记了，熟话说好记性不如烂笔头，还需在平时的工作中多练习记录。...
- Linux设置开机自动挂载分区
-
有时候，我们在安装完Linux系统之后，可能在使用过程中添加硬盘或者分区进行使用，这时候就需要手动把磁盘分区挂载到某个路径，但是开机之后就会消失，需要重新挂载，非常麻烦，那么我们应该如何设置开机自动挂...
- 在linux挂载一个新硬盘的完整步骤
-
以下是在Linux中挂载新原始磁盘的完整步骤，包括分区、创建文件系统以及使用UUID在/etc/fstab中启动时挂载磁盘：将新的原始磁盘连接到Linux系统并打开电源。运行以下命令，...
- Linux系统如何挂载exFAT分区
-
简介：Linux系统中不能像Windows系统那样自动识别加载新设备，需要手动识别，手动加载。Linux中一切皆文件。文件通过一个很大的文件树来组织，文件树的根目录是：/，从根目开始录逐级展开。这些文...
- Linux系统挂载硬盘
-
fdisk-l查看可挂载的磁盘都有哪些df-h查看已经挂载的磁盘...
- WSL2发布，如何在Win10中挂载Linux文件系统
-
WSL2是最新版本的架构，它为Windows子系统提供支持，使其能够在Windows上运行ELF64Linux二进制文件。通过最近的更新，它允许使用Linux文件系统访问存储在硬盘中的文件。如果你...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- oracle忘记用户名密码 (59)
- oracle11gr2安装教程 (55)
- mybatis调用oracle存储过程 (67)
- oracle spool的用法 (57)
- oracle asm 磁盘管理 (67)
- 前端 设计模式 (64)
- 前端面试vue (56)
- linux格式化 (55)
- linux图形界面 (62)
- linux文件压缩 (75)
- Linux设置权限 (53)
- linux服务器配置 (62)
- mysql安装linux (71)
- linux启动命令 (59)
- 查看linux磁盘 (72)
- linux用户组 (74)
- linux多线程 (70)
- linux设备驱动 (53)
- linux自启动 (59)
- linux网络命令 (55)
- linux传文件 (60)
- linux打包文件 (58)
- linux查看数据库 (61)
- linux获取ip (64)
- 关闭防火墙linux (53)