Vue 面试通杀秘籍

理论篇:

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.mfbz.cn/a/697916.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Kimichat使用案例013:用kimichat批量识别出图片版PDF文件中的文字内容

文章目录 一、介绍二、具体操作三、信息识别一、介绍 图片版的PDF文件,怎么才能借助AI工具来提取其中全部的文字内容呢? 第一步:将PDF文件转换成图片格式 具体方法参见文章: Kimichat使用案例011:用kimichat将PDF自动批量分割成多个图片(零代码编程) 第二步:识别图片中…

Redis实战宝典:基础知识、实战技巧、应用场景及最佳实践全攻略

背景 在Java系统实现过程中,我们不可避免地会借助大量开源功能组件。然而,这些组件往往功能丰富且体系庞大,官方文档常常详尽至数百页。而在实际项目中,我们可能仅需使用其中的一小部分功能,这就造成了一个挑战&#…

重庆地区媒体宣传邀约资源整理

传媒如春雨,润物细无声,大家好,我是51媒体网胡老师。 重庆地区媒体宣传邀约资源整理 一、主流媒体资源 电视台:重庆电视台:作为重庆地区最具影响力的电视媒体之一,拥有多个频道,涵盖新闻、综艺…

第2章 Rust初体验1/8:prelude:简化代码的自动标准库加载:猜骰子冷热游戏

讲动人的故事,写懂人的代码 在跑过Hello world程序后,三个人觉得这样还不过瘾,于是决定把那本Rust书里的猜数字游戏换个新面孔,变成“猜骰子冷热”游戏,然后一起动手实现一下。这样我们就能更深入地体验到Rust编程的乐趣啦。 (顺便说一句,如果你想找这本书的所有代码,…

Sklearn的安装和用法

安装sklearn相对简单,因为它是一个Python库,可以通过Python的包管理器pip来安装。 Windows、macOS和Linux通用步骤: 确保Python已安装: sklearn是基于Python的,所以首先确保你的计算机上安装了Python。推荐使用Pytho…

【图论应用】使用多路图(multigraph)对上海地铁站点图建模,并解决最短路径问题

文章目录 1 前言2 导包导入数据集3 创建多路图,导入节点和边信息3 绘制线路图4 计算最短路径 1 前言 最近正在学习图神经网络,先pick up了一些最基础的图论知识并学习了一些好玩的应用。 本文启发于B站视频(BV1LY411R7HJ)&#…

第1期JAVA社招面试经验月报

面经哥专注互联网社招面试经验分享,关注我,每日推送精选面经,面试前,先找面经哥|面经哥整理了上月30篇面试经历,选取了较为热点高频的面试题供大家参考 基础知识类‍‍‍‍‍ 1、说下双亲委派原则以及类加…

HDFS 读写数据流程

优质博文:IT-BLOG-CN 一、HDFS 写数据流程 HDFS 文件写入流程图如下:三个模块(客户端、NameNode、DataNode) 【1】校验: 客户端通过 DistributedFileSystem 模块向 NameNode 请求上传文件,NameNode 会检…

使用手机做PC机摄像头

准备工作: 带摄像头的安卓手机一部模拟相机软件:Iriun 、DroidCam 、IP摄像头pythonopencv 一、Iriun 1、分别在PC和手机上安装 2、手机和PC在同一个局域网 3、分别打开PC和手机端软件,电脑端就可以使用手机相机 ​ 二、 DroidCam 1、…

5.大模型高效微调(PEFT)未来发展趋势

PEFT 主流技术分类 UniPELT 探索PEFT 大模型的统一框架(2022) UIUC 和Meta AI 研究人员发表的UniPELT 提出将不同的PEFT 方法模块化。 通过门控机制学习激活最适合当前数据或任务的方法,尤其是最常见的3大类PEFT 技术: Adapters…

【PB案例学习笔记】-18制作一个IP地址编辑框

写在前面 这是PB案例学习笔记系列文章的第18篇,该系列文章适合具有一定PB基础的读者。 通过一个个由浅入深的编程实战案例学习,提高编程技巧,以保证小伙伴们能应付公司的各种开发需求。 文章中设计到的源码,小凡都上传到了gite…

Cocos2dx 编译游戏安装包制作教程

在 Visual Studio 项目中配置图标并使用 Inno Setup 创建安装包 在本教程中,我们将学习如何为 Visual Studio 编译项目配置图标,并使用 Inno Setup 创建安装包。教程包括以下部分: 设置项目图标:在 Visual Studio 中配置 .exe 文…

英语国际音标 - DJ 音标 - KK 音标

英语国际音标 - DJ 音标 - KK 音标 1. 国际音标 (International Phonetic Alphabet,IPA)1.1. 记音类型1.2. 48 个国际音标发音表1.2.1. 元音 (vowel)1.2.1.1. 单元音 (monophthong)1.2.1.2. 双元音 (diphthong) 1.2.2. 辅音 (consonant)1.2.2.1. 清音 (voiceless so…

用人工智能写2024年高考作文

目录 用人工智能写2024年高考作文 引用 一、2024年 新课标I卷 作文真题 AI写作范文 二、2024年 全国甲卷 作文真题 AI写作范文 三、2024年 新课标II卷 作文真题 AI写作范文 四、2024年 北京卷 作文真题一 AI写作范文 作文真题二 AI写作范文 作文真题三 AI写作…

Nginx中location规则与rewrite重写

一、概念介绍 1、location与rewrite的常用正则表达式 符号作用^ 匹配输入字符串的起始位置$ 匹配输入字符串的结束位置* 匹配前面的字符零次或多次。如“ol*”能匹配“o”及“ol”、“oll” 匹配前面的字符一次或多次。如“ol”能匹配“ol”及“oll”、“olll”&#xff0…

keda-P0460. 潜水员

可达信奥 - 登录 - 可达信奥https://kedaoi.cn/p/P0460 代码思路: 01背包DP。 思路也是比较经典的,就是看用这个水缸的最小值小,还是不用这个水缸的最小值小。但是这里涉及到一个初始化的问题,因为要求最小所以初始化理应…

1992-2012年美国西海岸的海面高度异常数据集

Gridded Altimeter Fields with Enhanced Coastal Coverage 具有增强海岸覆盖范围的网格化测高场 简介 具有增强的海岸覆盖范围的网格化高度计场数据产品包含美国西海岸的海面高度异常(SSHA 或 SLA)以及北纬 35.25 度-48.5 度和东经 227.75 度-248.5 …

【docker】日志

ocker 日志相关的操作主要涉及查看、管理和理解容器的日志输出。以下是一些常用的 Docker 日志命令和选项: 查看日志 docker logs container_id_or_name:获取指定容器的日志。docker logs -f container_id_or_name:跟随(实时输出…

ARM32开发--串口库封装(初级)

知不足而奋进望远山而前行 目录 文章目录 前言 目标 内容 开发流程 文件目录创建 分组创建 接口定义 完整代码 总结 前言 在嵌入式软件开发中,封装抽取流程和抽取封装策略是非常重要的技术,能够提高代码的复用性和可维护性。本文将介绍如何在文…

Python 多进程

单例模式 面试中,就被问到了这个问题,你知道用python怎么创建一个单例模式吗? 单例模式是什么? 就是这个对象只能被创建一次。 每次实例化,都是同一个对象。 单例模式是一种常用的软件设计模式。在它的核心结构中只包…