Vue 面试通杀秘籍

news2025/1/16 7:45:45

理论篇:

1. 说说对 Vue 渐进式框架的理解(腾讯医典)

a) 渐进式的含义: 主张最少, 没有多做职责之外的事
b) Vue 有些方面是不如 React,不如 Angular.但它是渐进的,没有强主张, 你可以在原有系统的上面,把一两个组件改用它实现,当 jQuery 用;
c) 也可以整个用它全家桶开发,当 Angular 用;还可以用它的视图,搭配 你自己设计的整个下层用。
d) 你可以在底层数据逻辑的地方用 OO 和设计模式的那套理念,也可以函 数式,都可以, 它只是个轻量视图而已,只做了自己该做的事,没有做 不该做的事,仅此而已

2. vue 的双向绑定的原理(腾讯医典)

a) 数据双向绑定是 通过数据劫持结合发布者-订阅者模式的方式来实现的。
b) 具体实现流程:
i.
实现一个监听器 Observer,用来劫持并监听所有属性,如果有变动的,就 通知订阅者
ii.
实现一个订阅者 Watcher,可以收到属性的变化通知并执行相应的函数, 从而更新视图
iii.
实现一个解析器 Compile,可以扫描和解析每个节点的相关指令,并根据 初始化模板数据以及初始化相应的订阅器
c) 把下面的流程图说清楚就差不多了:

3. Vue1.x 的设计理念是什么?2.x 的呢?(58 同城)

Vue1.x 设计理念
a) 早期 Vue 是 采用数据绑定、依赖收集的方式去观察数据变化 并保留对实际 DOM 元素的引用,当有数据变化时进行对应的操作。
b) 少量数据更新对比 Virtual DOM 性能更好,坏处是大量数据更新、初始渲染性
能、对比 Virtual DOM 性能更差
c) 图解:
Vue2.x 设计理念
1. Vue2.0 引入了虚拟 dom
通过建立虚拟 dom 树, document.createDocumentFragment(),方法创建虚拟 dom 树。一旦被监测的数据改变,会通过 Object.defineProperty 定义的数据拦截,截取到 数据的变化。
2. 截取到的数据变化,从而通过订阅——发布者模式,触发 Watcher(观察者),从而改 变虚拟 dom 的中的具体数据。
3. 最后,通过更新虚拟 dom 的元素值,从而改变最后渲染 dom 树的值,完成双向绑定。

应用篇:

1. Key 的作用是什么?可以用数组的 index(下标)代替么?(美团)

a) key 的作用主要是为了高效的更新虚拟 DOM 。另外 vue 中在使用相同标签 名元素的过渡切换时,也会使用到 key 属性,其目的也是为了让 vue 可以 区分它们。否则 vue 只会替换其内部属性而不会触发过渡效果
b) key 不能用 index 代替,index 在同一个页面会有重复的情况, 违背了高效 渲染的初衷

2. Vue 组件中 data 为什么必须是函数?(58 同城)

a) 在 new Vue() , data 是可以作为一个对象进行操作的,然而 在 component 中, data 只能以函数的形式存在,不能直接将对象赋值给它。
b) 当 data 选项是一个函数的时候,每个实例可以维护一份被返回对象的独立 的拷贝,这样各个实例中的 data 不会相互影响,是独立的。

3. $route 和 $router 的区别是什么?(深信服)

a) $router 为 VueRouter 的实例,是一个全局路由对象,包含了路由跳转的方
法、钩子函数等。
b) $route 是路由信息对象||跳转的路由对象,每一个路由都会有一个 route 对
象,是一个局部对象,包含 path,params,hash,query,fullPath,matched,
name 等路由信息参数。

Vue 3.0

1. 为什么要用 Proxy API 替代 defineProperty API?(响应式优化)

a) defineProperty 的局限性的最大原因是它只能针对单例属性做监听,Vue2.x 中对 data 中的属性做了遍历 + 递归,为每个属性设置了 getter、setter。 这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因。
b) Proxy 的监听是针对一个对象的,那么对这个对象的所有操作会进入监听操作, 这就完全可以代理所有属性,将会带来很大的性能提升和更优的代码。

2. Vue3.0 编译做了哪些优化?

a) 生成 block tree
i.
Vue.js 2.x 的数据更新并触发重新渲染的粒度是组件级的,单个组件内部 需要遍历该组件的整个 vnode 树。
ii.
Vue.js 3.0 做到了通过编译阶段对静态模板的分析,编译生成了 Block tree。 Block tree 是一个将模版基于动态节点指令切割的嵌套区块,每个 区块内部的节点结构是固定的。每个区块只需要追踪自身包含的动态节点。
2.1 传统 Virtual DOM 的性能瓶颈 2.1.1 根本原因
2.1.2 优化(动静结合)
b) slot 编译优化
i.
Vue.js 2.x 中,如果有一个组件传入了 slot ,那么每次父组件更新的时候, 会强制使子组件 update ,造成性能的浪费。
ii.
Vue.js 3.0 优化了 slot 的生成,使得非动态 slot 中属性的更新只会触发 子组件的更新。动态 slot 指的是在 slot 上面使用 v-if v-for ,动态 slot 名 字等会导致 slot 产生运行时动态变化但是又无法被子组件 track 的操作。

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

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

相关文章

Java面向对象-Object类的toString方法、equals方法

Java面向对象-Object类的toString方法、equals方法 一、toString二、equals三、总结 一、toString Object的toString方法。 方法的原理: 现在使用toString方法的时候,打印出来的内容不友好。 现在想要知道对象的信息。 出现的问题:子类Stu…

SAP Build 2 PDF数据提取与决策树(未完成)

0. 安装desktop agent 在后续过程中发现要预先安装desktop agent,否则没法运行自动化流程… 0.1 agent下载 参考官方文档说明 https://help.sap.com/docs/build-process-automation/sap-build-process-automation/create-user-in-rbsc-download-repository?loca…

AI办公自动化:用Kimi批量在Excel文件名中加入日期

工作任务:在一个文件夹中所有的Excel文件后面加上一个日期 在Kimi中输入提示词: 你是一个Python编程专家,写一个Python脚本,具体步骤如下: 打开文件夹:F:\AI自媒体内容\AI行业数据分析\投融资 读取里面所…

18.2 HTTP服务器-处理函数、响应404错误

1. 处理函数 处理来自客户端的请求,并回之以特定的响应,这是处理函数的主要任务。在处理函数中,我们通常会完成如下工作: 验证请求路径 http.Request.URL.Pathhttp.NotFound(...) 当请求没有对应的处理函数时,返回4…

机器学习笔记:label smoothing

在传统的分类任务中,我们通常使用硬标签(hard labels) 即如果一个样本属于某个类别,其对应的标签就是一个全0的向量,除了表示这个类别的位置为1。例如,在一个3类分类任务中,某个样本的标签可能是…

【Vue】购物车案例-构建项目

脚手架新建项目 (注意:勾选vuex) 版本说明: vue2 vue-router3 vuex3 vue3 vue-router4 vuex4/pinia vue create vue-cart-demo需要勾选上vuex,由于这个项目只有一个页面,vuex可勾可不勾 将原本src内容清空,替换成教学…

缓存更新策略中级总结

背景 看到好些人在写更新缓存数据代码时,先删除缓存,然后再更新数据库,而后续的操作会把数据再装载的缓存中。然而,这个是逻辑是错误的。试想,两个并发操作,一个是更新操作,另一个是查询操作…

数据结构(常见的排序算法)

1.插入排序 1.1直接插入排序 在[0 end]区间上有序,然后将(end1)的数据与前面有序的数据进行比较,将(end1)的数据插入,这样[0 end1]区间上就是有序的,然后再向后进行比较。 例如&a…

VXLAN技术

VXLAN技术 一、VXLAN简介 1、定义 VXLAN(Virtual eXtensible Local Area Network):采用MAC in UDP(User Datagram Protocol)封装方式,是NVO3(Network Virtualization over Layer 3&#xff09…

机器学习算法 —— 贝叶斯分类之模拟离散数据集

🌟欢迎来到 我的博客 —— 探索技术的无限可能! 🌟博客的简介(文章目录) 目录 实战(贝叶斯分类)莺尾花数据模拟离散数据集库函数导入数据导入和分析模型训练和预测 总结 实战(贝叶斯…

C语言 | Leetcode C语言题解之第144题二叉树的前序遍历

题目: 题解: int* preorderTraversal(struct TreeNode* root, int* returnSize) {int* res malloc(sizeof(int) * 2000);*returnSize 0;if (root NULL) {return res;}struct TreeNode *p1 root, *p2 NULL;while (p1 ! NULL) {p2 p1->left;if (…

一道Delphi的For循环题目

起因 事情是这样的: 俺在一个Delphi交流QQ群,有点冷场,俺想热一下场子就发了下面这个段子。其实这是之前俺带新人时的一道题目。 第一个回答 第一个网友给的答案是 i:i-1; 俺说这个答案是不对的,因为 Delphi在编译时是不允许…

探索智慧机场运营中心解决方案的价值与应用

随着全球航空业的不断发展,机场运营中心的作用日益凸显。智慧机场运营中心解决方案以其高效的管理和智能化的运营模式,成为优化机场运营、提升服务水平的重要工具。本文将深入探讨智慧机场运营中心解决方案的价值与应用,揭示其在机场管理中的…

软件下载网站源码附手机版和图文教程

PHP游戏应用市场APP软件下载平台网站源码手机版 可自行打包APP,带下载统计,带多套模板,带图文教程,可以做软件库,也可以做推广app下载等等,需要的朋友可以下载 源码下载 软件下载网站源码附手机版和图文…

下拉框数据被遮挡 且 后续数据无法下拉的 解决方法

目录 前言1. 问题所示2. 原理分析3. 解决方法3.1 添加空白版2.2 调整z-index2.3 父容器的溢出属性2.4 调整样式属性4. 效果图前言 小程序使用的是Uniapp,原理都差不多,索性标题就不标注Uniapp(小程序) 对于该问题调试了一个晚上,最终解决,对此记录下来 1. 问题所示 执…

怎么取消Intellij IDEA中的项目和Git仓库的关联

这篇文章分享一种最简单的方法,取消已经开启代码控制的项目与git代码仓库的关联。 打开项目的位置,然后点击文件管理器上方的查看选项卡,勾选【隐藏的项目】。 删除.git文件夹 然后可以看到项目的文件夹下显示了一个隐藏的.git文件夹&#x…

MATLAB基础应用精讲-【数模应用】二元Logit分析

目录 算法原理 数学模型 极大似然法 Newton牛顿迭代法 logit回归分析步骤 一、二元logit分析 1.基本说明 2.数据处理 3.SPSSAU上传数据 4.分析前提示 5.SPSSAU分析 6.其它说明 二、多分类logit分析 1.基本说明 2.数据要求与处理 3.SPSSAU上传数据 4.SPSSAU分析…

微信小程序双层/多层 wx:for 循环嵌套,关于内外层的 index 和 item ;data-index 传递两个参数

微信小程序用 wx:for 循环可以快速将后端 js 的数组快速显示到前端&#xff1b; 那假如数组中嵌套数组&#xff1b;就存在内外层两层及以上的多层嵌套循环了。 那么如果两层的嵌套式循环 index 究竟是属于哪一层呢&#xff1f;item 又属于哪一个呢&#xff1f; <view><…

【优选算法】详解target类求和问题(附总结)

目录 1.两数求和 题目&#xff1a; 算法思路&#xff1a; 代码&#xff1a; 2.&#xff01;&#xff01;&#xff01;三数之和 题目 算法思路&#xff1a; 代码&#xff1a; 3.四数字和 题目&#xff1a; 算法思路&#xff1a; 代码&#xff1a; 总结&易错点&…

Java实现物候相机和植被分析导出相对指数成果图

一、基础概念 植被分析是利用地理信息系统&#xff08;GIS&#xff09;、遥感技术、生态学、环境科学等多学科交叉手段&#xff0c;对植被的分布、类型、结构、组成、动态变化、生产力、生态功能进行量化评估的过程。植被分析对于生态保护、生物多样性研究、资源管理、环境监测…