常见前端面试之VUE面试题汇总十二

news2025/1/22 17:05:43

 35. defineProperty 和 proxy 的区别

Vue 在 实 例 初 始 化 时 遍 历 data 中 的 所 有 属 性 , 并 使 用 Object.defineProperty 把这些属性全部转为 getter/setter。这样 当追踪数据发生变化时,setter 会被自动调用。

Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就 是 Vue 不支持 IE8 以及更低版本浏览器的原因。

但是这样做有以下问题:

1.添加或删除对象的属性时,Vue 检测不到。因为添加或删除的对象 没 有 在 初 始 化 进 行 响 应 式 处 理 , 只 能 通 过 $set 来 调 用 Object.defineProperty()处理。

2.无法监控到数组下标和长度的变化。

Vue3 使用 Proxy 来监控数据的变化。Proxy 是 ES6 中提供的功能,其作用为:用于定义基本操作的自定义行为(如属性查找,赋值,枚 举,函数调用等)。相对于 Object.defineProperty(),其有以下特 点:

1.Proxy 直接代理整个对象而非对象属性,这样只需做一层代理就可 以监听同级结构下的所有属性变化,包括新增属性和删除属性。2.Proxy 可以监听数组的变化。

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

在 Vue2 中, 0bject.defineProperty 会改变原始数据,而 Proxy 是创建对象的虚拟表示,并提供 set 、get 和 deleteProperty 等 处理器,这些处理器可在访问或修改原始对象上的属性时进行拦截,有以下特点∶

不需用使用 Vue.$set 或 Vue.$delete 触发响应式。

全方位的数组变化检测,消除了 Vue2 无效的边界情况。

支持 Map,Set,WeakMap 和 WeakSet。

Proxy 实现的响应式原理与 Vue2 的实现原理相同,实现方式大同小 异∶

get 收集依赖

Set、delete 等触发依赖

对于集合类型,就是对集合对象的方法做一层包装:原方法执行后执 行依赖相关的收集或触发逻辑。

37. 虚拟 DOM 的解析过程

虚拟 DOM 的解析过程:

首先对将要插入到文档中的 DOM 树结构进行分析,使用 js 对象将 其表示出来,比如一个元素对象,包含 TagName、props 和 Children

这些属性。然后将这个 js 对象树给保存下来,最后再将 DOM 片段 插入到文档中。

当页面的状态发生改变,需要对页面的 DOM 的结构进行调整的时候,首先根据变更的状态,重新构建起一棵对象树,然后将这棵新的对象 树和旧的对象树进行比较,记录下两棵树的的差异。

最后将记录的有差异的地方应用到真正的 DOM 树中去,这样视图就 更新了。

38. DIFF 算法的原理

在新老虚拟 DOM 对比时:

首先,对比节点本身,判断是否为同一节点,如果不为相同节点,则 删除该节点重新创建节点进行替换

如果为相同节点,进行 patchVnode,判断如何对该节点的子节点进 行处理,先判断一方有子节点一方没有子节点的情况(如果新的 children 没有子节点,将旧的子节点移除)

比较如果都有子节点,则进行 updateChildren,判断如何对这些新 老节点的子节点进行操作(diff 核心)。

匹配时,找到相同的子节点,递归比较子节点

在 diff 中,只对同层的子节点进行比较,放弃跨级的节点比较,使 得时间复杂从 O(n 3)降低值 O(n),也就是说,只有当新旧 children 都为多个子节点时才需要用核心的 Diff 算法进行同层级比较。

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

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

相关文章

嵌入式学习笔记(2)ARM的37个寄存器详解

ARM中寄存器包括SFR和37个通用寄存器,通用寄存器是CPU(运算器控制器通用寄存器)的组成部分。37个通用寄存器是搭配7种工作模式来学习的。因为每种工作模式下,可见的通用寄存器都不相同,每种模式下最多只能看到18个寄存器,部分寄存…

Java之SpringCloud Alibaba【五】【微服务 Sentinel整合openfeign进行降级】

一、Sentinel整合openfeign 1、复制一下order-openfeign项目(创建order-openfeign-sentinel) 然后在stock-nacos当中编写对应的接口 RequestMapping("/reduct2")public String reduct2(){int a 1/0;System.out.println("扣减库存"…

聊聊spring项目中如何动态刷新bean

前言 前阵子和朋友聊天,他手头上有个spring单体项目,每次数据库配置变更,他都要重启项目,让配置生效。他就想说有没有什么办法,不重启项目,又可以让配置生效。当时我就跟他说,可以用配置中心&a…

AArch64内存模型

概述 本指南介绍了 Armv8‑A 和 Armv9‑A 中的内存属性/特性。首先解释内存的属性从何而来,以及如何将其分配给内存区域。然后介绍不同的属性,以及内存访问顺序的基础知识。 这些信息对于底层(例如启动代码或驱动程序)开发人员都…

windows上奇怪的dump指向

1. CPP_EXCEPTION_e06d7363_pcl_filters.dll 百度后发现 e06d7363可能是杀毒软件把pcl的依赖库当成病毒,加到白名单即可。 修复未知软件异常错误代码0xe06d7363-回忆主机

Python实现自动关键词提取

随着互联网的发展,越来越多的人喜欢在网络上阅读小说。本文将通过详细示例,向您介绍如何使用Python编写爬虫程序来获取网络小说,并利用自然语言处理技术实现自动文摘和关键词提取功能。 1. 网络小说数据抓取 首先,请确保已安装必…

2023-08-29 LeetCode(带因子的二叉树)

2023-08-29每日一题 一、题目编号 823. 带因子的二叉树二、题目链接 点击跳转到题目位置 三、题目描述 给出一个含有不重复整数元素的数组 arr ,每个整数 arr[i] 均大于 1。 用这些整数来构建二叉树,每个整数可以使用任意次数。其中:每…

Android 之 传感器专题 (2) —— 方向传感器

本节引言: 在上一节中我们中我们对传感器的一些基本概念进行了学习,以及学习了使用传感器的套路, 本节给大家带来的传感器是方向传感器的用法,好的,开始本节内容~ 1.三维坐标系的概念: 在Android平台中&a…

60个令人兴奋的ThreeJS网站示例

60个令人兴奋的ThreeJS网站示例 Three.js是一个JavaScript库,它使在Web上创建3D图形比直接使用WebGL容易得多。Three.js是网络上最受欢迎的3D JavaScript库,很容易上手。因此,在这篇文章中,我将展示一些创意网站的例子&#xff0…

数据分析师初级—中级—高级,每个阶段都需要学习什么?

先你需要看下这张图,这是一张数据分析师能力体系图: 通过图片,我们可以比较清晰的看到这三个阶段的数据分析师在各方面能力的差别了,那下面我们就来具体侃侃他们的区别。 初级水平 什么是初学者?如果解析学和数据科…

基于大语言模型知识问答应用落地实践 – 知识库构建(下)

上篇介绍了构建知识库的大体流程和一些优化经验细节,但并没有结合一个具体的场景给出更细节的实战经验以及相关的一些 benchmark 等,所以本文将会切入到一个具体场景进行讨论。 目标场景:对于 PubMed 医疗学术数据中的 1w 篇文章进行知识库构…

Autoware.universe部署04:universe传感器ROS2驱动

文章目录 一、激光雷达驱动二、IMU驱动2.1 上位机配置4.2 IMU校准4.3 安装ROS驱动 三、CAN驱动四、相机驱动4.1 安装驱动4.2 修改相机参数 五、GNSS驱动 本文介绍了 Autoware.universe 各个传感器ROS2驱动,本系列其他文章: Autoware.universe部署01&…

tensorrtx部署yolov5 6.0

文章目录 一. yolov5 v6.0训练模型二.训练好的yolov5模型转tensorrt引擎 一. yolov5 v6.0训练模型 官网下载yolov5 v6.0代码 下载官方预训练好的模型 安装yolov5所需要的库文件,requirements.txt在下载好的yolov5源代码中有 pip install -r C:\Users\10001540…

基于S参数的稳定性分析

目录 1、一些常数的定义2、负载稳定性区域3、结束语 1、一些常数的定义 在基于S参数讨论网络的稳定性之前&#xff0c;首先定义几组常数&#xff0c;如下&#xff1a; 无条件稳定&#xff1a;对于任意的|ГL|<1&#xff0c;|ГS|<1&#xff0c;则一定有|Гin|<1&am…

Linux基础(一)

1.操作系统概念 人与计算机交流的中介 管理和控制计算机中硬件和软件资源 处于上层应用程序和底层硬件之间的软件平台 2.操作系统组成 内核&#xff1a;直接控制管理硬件 内核直接识别计算机二进制语言 解释器&#xff1a;把c c java python等语言解释成二进制&#xff…

闲人闲谈PS之四十六——网络生产全流程

惯例闲话&#xff1a;下半年已开始块行情似乎又是一波大涨&#xff0c;很多朋友委托我介绍PS顾问&#xff0c;很多朋友已经上了能源系统项目&#xff0c;这就造成装备制造的PS又是极度紧缺&#xff0c;rate也还可以&#xff0c;搞的自己也有点心痒痒。这种逆势大涨&#xff0c;…

Python读取Windows注册表的实战代码

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

聚观早报|我国网民规模达10.79亿人;比亚迪冲进人形机器人赛道

【聚观365】8月29日消息 我国网民规模达10.79亿人 比亚迪冲进人形机器人赛道 新岚图FREE上市一周订单突破1.1万辆 SpaceX龙飞船成功与国际空间站对接 三星电子将在德国和日本举办晶圆代工论坛 我国网民规模达10.79亿人 中国互联网络信息中心&#xff08;CNNIC&#xff09…

【2023中国算力大会】《中国综合算力指数(2023年)》出炉,宁夏“资源环境”位列全国第1,“算力”跃入Top10

2023年8月18日-19日&#xff0c;2023中国算力大会在宁夏银川举行&#xff0c;本届大会以“算领新产业潮流 力赋高质量发展”为主题&#xff0c;打造“主题论坛、成果展示、产业推介、先锋引领”四大核心内容&#xff0c;全面展示算力产业发展最新成果&#xff0c;为产业各方搭建…

Android 蓝牙开发(一)

蓝牙简介 蓝牙&#xff08;Bluetooth&#xff09;是一种无线技术标准&#xff0c;能够在短距离内实现设备之间的数据交换和通信。蓝牙技术最初由瑞典爱立信公司于1994年开发&#xff0c;其名称源自丹麦国王哈拉尔布吕特的译名“Harald Bluetooth”&#xff0c;他曾统一了斯堪的…