Vue基础面试题(三)

文章目录

  • 1.Vue3.0有什么更新
  • 2.defineProperty和proxy的区别
  • 3.Vue3.0 为什么要用 proxy?
  • 4.对虚拟DOM的理解?
  • 5.虚拟DOM的解析过程
  • 6. 虚拟DOM真的比真实DOM性能好吗
  • 7.DIFF算法的原理
  • 8. Vue中key的作用

1.Vue3.0有什么更新

  • 响应式原理改成了用proxy,解决了数组无法通过下标修改,无法监听到对象属性的新增和删除问题。
  • 通过reactive定义的响应式数据是使用proxy包装的,而ref还是用的defineProperty给空对象定义一个value属性来实现响应式。
  • 组合式api的写法,方便按需引入,打包的体积更小。
  • 增加了静态节点标记,会标记静态节点,不对静态节点进行对比,从而增加效率。
  • 重写了内部结构,对TypeScript的支持更加完善。
  • 去掉了vue2.0中的 beforeCreate 和 created 两个阶段,新增了一个setup。destroyed 销毁后被重命名为 unmounted卸载后
  • 新增组件Teleport(传送),它可以将包裹组件传送到任何指定地方,且不改变组件内部的元素父子关系()主要应用于弹窗。

2.defineProperty和proxy的区别

  • Vue 在实例初始化时遍历 data 中的所有属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。这样当追踪数据发生变化时,setter 会被自动调用。(无法监控到数组下标和长度的变化,ES5中的写法)
  • proxy用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等),Proxy 直接代理整个对象而非对象属性。(Proxy 可以监听数组的变化。 )

3.Vue3.0 为什么要用 proxy?

相较于Object.defineProperty有着改进和优势

  • 能监听到对象的所有的所有操作。
  • 对数组的所有操作都可以捕获,包括数组长度和索引访问。
  • 性能提升(拦截操作时无需遍历整个对象)

4.对虚拟DOM的理解?

  • 虚拟DOM是对DOM的抽象,这个对象是更加轻量级的对 DOM的描述,虚拟DOM本身是js对象,当组件的状态变化时,框架会生成一个新的虚拟DOM 树,框架比较新旧虚拟 DOM 树,找到其中的差异,根据差异,框架将最小化的更新应用到真实 DOM,虚拟 DOM 的主要优势在于它能够减少直接 DOM 操作的频率和复杂性,从而提高性能和开发效率。

5.虚拟DOM的解析过程

将 JavaScript 对象表示的虚拟 DOM 转换为实际的 DOM 元素,并根据应用的状态变化高效地更新视图。

  • 首先对将要插入到文档中的 DOM 树结构进行分析,使用 js 对象将其表示出来。
  • 当应用状态发生改变时,触发重新渲染,框架会生成新的虚拟DOM树。
  • 将新生成的虚拟DOM树与之前的虚拟DOM树进行比较,找出两者之间的差异,也就是需要更新的部分。
  • 算出需要进行更新的最小操作集,以减少对实际DOM的操作次数。
  • 将计算出的更新操作批量应用到实际的DOM上,从而使得页面呈现最新的状态。

6. 虚拟DOM真的比真实DOM性能好吗

取决于具体的情况。在某些情况下,虚拟DOM的性能可能会比真实DOM差,例如,当我们的应用程序的状态变化非常频繁时。但是,总的来说,虚拟DOM的性能是比真实DOM好的。

  • 首次渲染大量DOM时,由于多了一层虚拟DOM的计算,会比innerHTML插入慢。
  • 虚拟DOM可以将多次状态变更合并为一次更新,从而减少对实际DOM的频繁操作。

7.DIFF算法的原理

diff 算法的核心思想是比较新旧虚拟 DOM 树(递归+双指针算法),找出差异,并生成最小的操作集合(最小化更新视图),以最有效的方式将这些差异应用到真实的 DOM 上。比较只会在同层级进行, 不会跨层级比较

  • 首先,对比节点本身,判断是否为同一节点,如果不为相同节点,则删除该节点重新创建节点进行替换。如果节点相同(进行patchVnode),则进一步比较属性和子节点。
  • 递归地比较和更新子节点,利用键值优化来高效地匹配和复用节点,减少不必要的 DOM 操作。
  • 找出新旧节点属性的差异,删除旧属性中不再需要的部分,添加或更新新的属性。
  • 如果都有子节点,则进行updateChildren,判断如何对这些新老节点的子节点进行操作。

8. Vue中key的作用

key属性是DOM元素的唯一标识。

  • Vue 会根据 key 来追踪和比较节点的位置和状态,可以更高效地进行节点的对比和更新,避免不必要的 DOM 操作。
  • v-for中使用key,可以方便Vue跟踪元素的身份,从而高效实现复用,高效更新渲染虚拟DOM。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/28023.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全光万兆时代来临:信而泰如何推动F5G-A(50PONFTTR)技术发展

技术背景 F5G-A(Fifth Generation Fixed Network-Advanced,第五代固定网络接入)是固定网络技术的一次重大升级,代表了光纤网络技术的最新发展。F5G-A旨在提供更高的带宽、更低的延迟、更可靠的连接以及更广泛的应用场景。 F5G-A六…

【多线程】如何使用jconsole工具查看Java线程的详细信息?

🥰🥰🥰来都来了,不妨点个关注叭! 👉博客主页:欢迎各位大佬!👈 文章目录 1. 先运行java程序!2. 在jdk目录下的bin文件夹中找到jconsole.exe3. 新建连接4. 观察线程状态5. …

OpenCV形态学

什么事形态学处理 基于图像形态进行处理的一些基本方法; 这些处理方法基本是对二进制图像进行处理; 卷积核决定着图像出来后的效果。 一 图像二值化 什么是二值化 将图像的每个像素变成两种值,如0,255. 全局二值化。 局部二值化。 thres…

【LVGL v8.3】修改 ARC 控件指针图片风格

文章目录 前言实现注意 前言 在车辆仪表中,ARC 控件作为仪表指针,常用图片做特定显示指针 Guider 1.7.2 初始化目前不能指定图片风格 通过修改代码,追加效果 实现 原生指针部件代码:只有颜色,宽度,透明…

08 SpringBoot 自定定义配置

SpringBoot自定义配置有三种方式: 使用PropertySource进行自定义配置 使用ImportResource进行自定义配置 使用Configuration进行自定义配置 PropertySource ​ 如果将所有的配置都集中到 application.properties 或 application.yml 中,那么这个配置文…

Python闯LeetCode--第1题:两数之和

Problem: 1. 两数之和 文章目录 思路解题方法复杂度Code 思路 看到这道题第一思路就是暴力破解,枚举,两个for循环遍历,直到找到满足要求的答案。主要因题目假设只有一组满足结果的答案,因此难度大大降低,作为第一道题&…

解决javadoc一直找不到路径的问题

解决javadoc一直找不到路径的问题 出现以上问题就是我们在下载jdk的时候一些运行程序安装在C:\Program Files\Common Files\Oracle\Java\javapath下: 一开始是没有javadoc.exe文件的,我们只需要从jdk的bin目录下找到复制到这个里面,就可以使用…

去掉eslint

1、在vue.config.js文件里加上下面的代码,然后重启就可以了! 2、vue.config.js文件代码: const { defineConfig } require(vue/cli-service) module.exports defineConfig({transpileDependencies: true,lintOnSave: false })

堆栈溢出的攻击 -fno-stack-protector stack smash 检测

在程序返回的一条语句堆栈项目处&#xff0c;用新函数的起始地址覆盖&#xff0c;将会跳转到执行新函数。 现在系统对这个行为做了判断&#xff0c;已经无法实施这类攻击或技巧。 1&#xff0c;测试代码 #include <stdio.h> void cc() {printf("I am cc( )\n"…

设置SSHkeys多服务器免登录配置(ssh config)

一、背景&#xff1a; 多邮箱或者多git账号进行同一台电脑开发的情况。 有时候&#xff0c;开发时可能会面临一个情况&#xff0c;就是通过自己的电脑&#xff0c;可能同时需要开发多个不同地方的项目&#xff0c;或者说&#xff0c;自己建立的项目已经配置好SSH验证免密登录&a…

C# WPF入门学习主线篇(二十三)—— 控件模板(ControlTemplate)和数据模板(DataTemplate)

C# WPF入门学习主线篇&#xff08;二十三&#xff09;—— 控件模板&#xff08;ControlTemplate&#xff09;和数据模板&#xff08;DataTemplate&#xff09; 在WPF开发中&#xff0c;控件模板&#xff08;ControlTemplate&#xff09;和数据模板&#xff08;DataTemplate&am…

基于Python+OpenCV+SVM车牌识别系统(GUI界面)【W3】

简介&#xff1a; 随着交通管理的日益复杂化和智能化需求的增加&#xff0c;车牌识别系统在安防、智慧交通管理等领域中扮演着重要角色。传统的车牌识别系统主要基于图像处理和模式识别技术&#xff0c;随着计算机视觉技术的发展&#xff0c;基于Python、OpenCV和机器学习算法的…

Vue3新特性指南:探索新增指令、内置组件和改进

Vue.js是一款流行的JavaScript框架,用于构建现代Web应用。Vue3是Vue.js的最新版本,引入了许多新特性和改进。本文将介绍Vue3新增的指令、内置组件以及其他值得关注的改进,并提供使用组合式API的用法示例。 一、新增指令 v-is指令: v-is指令用于动态组件,可以根据表达式的值来…

2024年6月-Docker配置镜像代理

步骤1&#xff1a;编辑 daemon.json 文件 vim /etc/docker/daemon.json步骤2&#xff1a;添加配置 将以下内容粘贴到文件中&#xff1a; {"insecure-registries": ["192.168.0.99:8800"],"data-root": "/mnt/docker","registr…

redis 故障处理: 持续更新

redis 内存快满&#xff1a; 突发性&#xff1a; 1.1 当突发的时候&#xff0c;先进行扩容redis 内存&#xff1a; CONFIG SET maxmemory 6G 1.2 通过monter 获取当前redis 请求&#xff0c;发送给开发&#xff0c;让开发进行处理一下缓慢性&#xff1a; 进行扫描一下redis…

文件初阶入门(葵花宝典)

1. 文件的顺序读写 1.1 顺序读写函数的介绍 函数名 功能 适用于 fgetc 字符输入函数 所有输入流 fputc 字符输出函数 所有输出流 fgets 文本行输入函数 所有输入流 fputs 文本行输出函数 所有输出流 f…

小数二分个人见解

小数二分 小数二分题目 小数二分 整数二分 是找边界点&#xff0c;而小数二分找的是 近似值。 整数二分是在一个整型数组当中 查找&#xff0c;而小数二分是在数轴中 查找&#xff0c;都是每次可以排除一半的区间&#xff0c;只不过小数二分中while循环内的结束条件和整数二分…

大模型中的计算精度——FP32, FP16, bfp16之类的都是什么???

大模型中的计算精度——FP32, FP16, bfp16之类的都是什么&#xff1f;&#xff1f;&#xff1f; 这些精度是用来干嘛的&#xff1f;&#xff1f;混合精度 mixed precision training什么是混合精度&#xff1f;怎么转换呢&#xff1f; 为什么大语言模型通常使用FP32精度训练量化…

深入探索Spring Boot的条件装配与条件注解

Spring Boot 的条件装配&#xff08;Conditional装配&#xff09;是一个强大的功能&#xff0c;它允许你根据特定的条件来决定哪些配置类、beans 或组件应该被加载到Spring应用上下文中。这有助于创建更灵活、更模块化的Spring Boot应用程序。 在Spring Boot中&#xff0c;条件…

ECharts 数据的视觉映射

ECharts 数据的视觉映射 ECharts 是一个由百度开源的&#xff0c;基于 JavaScript 的数据可视化库。它提供了丰富的图表类型和灵活的配置选项&#xff0c;使得用户能够轻松地将数据转换为直观的图表。在 ECharts 中&#xff0c;数据的视觉映射是一个核心功能&#xff0c;它允许…