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.rhkb.cn/news/347572.html

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

相关文章

LogicFlow 学习笔记——1. 初步使用 LogicFlow

什么是 LogicFlow LogicFlow 是一个开源的前端流程图编辑器和工作流引擎,旨在帮助开发者和业务人员在网页端创建、编辑和管理复杂的业务流程和工作流。它提供了一个直观的界面和强大的功能,使得设计和管理工作流变得更加高效和便捷。 官网地址&#xff…

RN:Error: /xxx/android/gradlew exited with non-zero code: 1

问题 执行 yarn android 报错: 解决 这个大概率是缓存问题,我说一下我的解决思路 1、yarn doctor 2、根据黄色字体提示,说我包版本不对(但是这个是警告应该没事,但是我还是装了) npx expo install --…

企事业单位安全生产月活动怎样向媒体投稿?

作为一名单位的信息宣传员,我肩负着将每一次重要活动的精彩瞬间转化为文字,向外界传递我们单位声音的重任。初入此行时,我满怀热情,坚信通过传统的方式——电子邮件投稿,能够有效地将我们的故事传播出去。然而,现实却给我上了生动的一课。 记得在筹备“安全生产月”活动的宣传时…

Ubuntu22.04之解决:emacs无法输入中文问题(二百四十)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…

代码随想录 | Day18 | 二叉树:完全二叉树的节点个数平衡二叉树

代码随想录 | Day18 | 二叉树:完全二叉树的节点个数&&平衡二叉树 主要学习内容: 1.完全二叉树的性质,满二叉树的节点数量的计算 2.树的高度和深度问题要用后序遍历更加合适 222.完全二叉树的节点个数 222. 完全二叉树的节点个数…

MT2096 数列分段

代码&#xff1a; #include <bits/stdc.h> using namespace std; const int N 1e5 10; int n, m; int a[N]; int ans 1; int main() {cin >> n >> m;for (int i 1; i < n; i)cin >> a[i];int num 0;for (int i 1; i < n; i){if (num a[i…

【QT】记录一次QT程序发布exe过程

记录一次QT程序发布exe过程 使用windeploy与enigma发布独立的QT程序第一步 QT编译输出 **release** 版本第二步 QT 自带 windepoyqt 补全链接库第三步 enigma virtual box压缩打包为单一exe最后【2024-06-07 17】- 【补充】 贴一个自己用的bat脚本【**QtDeploy2exe.bat**】半自…

6月11号作业

思维导图 #include <iostream> using namespace std; class Animal { private:string name; public:Animal(){}Animal(string name):name(name){//cout << "Animal&#xff1b;有参" << endl;}virtual void perform(){cout << "讲解员的…

WordPress——Argon主题美化

文章目录 Argon主题美化插件类类别标签页面更新管理器文章头图URL查询监视器WordPress提供Markdown语法评论区头像设置发信设置隐藏登陆备份设置缓存插件 主题文件编辑器页脚显示在线人数备案信息(包含备案信息网站运行时间)banner下方小箭头滚动效果站点功能概览下方Links功能…

Spring Boot入门

目录 前言 1.安装Spring Boot Help插件 1.1查找插件并下载 2.2安装插件 2.Idea创建SpringBoot项⽬ 3.其他方式创建SpringBoot项⽬ 3.1 Spring 官网创建 3.2 阿里云创建 3.3 不基于任何页面&#xff0c;插件进行创建 4.⽬录介绍 5.项目启动 5.1项目启动前可能会遇到…

统计绘图 | 既能统计分析又能可视化绘制的技能

在典型的探索性数据分析工作流程中&#xff0c;数据可视化和统计建模是两个不同的阶段&#xff0c;而我们也希望能够在最终的可视化结果中将相关统计指标呈现出来&#xff0c;如何让将两种有效结合&#xff0c;使得数据探索更加简单快捷呢&#xff1f;今天这篇推文就告诉你如何…

Nginx 网站服务

一.Nginx 概述 1.一款高性能、轻量级Web服务软件 稳定性高 系统资源消耗低 对HTTP并发连接的处理能力高 单台物理服务器可支持30000~5000个并发请求 2.Nginx与Apache区别 最核心的区别在于 Nginx 采用异步非阻塞机制&#xff0c;多个连接可以对应一个进程&#xff1b;Apache 采…

HyperAI超神经 x MoonBit | 与中科院、Intel 等专家共话基础软件前沿发展与期待

本次 Meetup 将讨论 MoonBit 编程语言、RuyiSDK、WAMR和 RISC-V 等技术&#xff0c;来现场参与不仅可以学习到最前沿的技术知识&#xff0c;更可与大咖面对面互动交流心得&#xff0c;还有美食茶歇与精美礼品&#xff0c;期待你的到来&#xff01; 扫码立即报名 ⬇️ 活动详情…

自动驾驶#芯片-1

概述 汽车是芯片应用场景之一&#xff0c;汽车芯片需要具备车规级。  车规级芯片对加工工艺要求不高&#xff0c;但对质量要求高。需要经过的认证过程&#xff0c;包括质量管理标准ISO/TS 16949、可靠性标准 AEC-Q100、功能安全标准ISO26262等。  汽车内不同用途的芯片要求…

SAP CS01/CS02/CS03 BOM创建维护删除BAPI使用及增强改造

BOM创建维护删除相关BAPI的使用代码参考示例&#xff0c;客户电脑只能远程桌面&#xff0c;代码没法复制粘贴出来&#xff0c;只能贴图。 创建及修改BAPI: CSAP_MAT_BOM_MAINTAIN。 删除BAPI: CSAP_MAT_BOM_DELETE。 改造BAPI: CSAP_MAT_BOM_MAINTAIN 改造点1&#xff1a;拷…

贪吃蛇小游戏简单制作-C语言

文章目录 游戏背景介绍实现目标适合人群所需技术浅玩Window API什么是API控制台程序窗口大小,名称设置 Handle(句柄)获取句柄 坐标结构体设置光标位置 光标属性获取光标属性设置光标属性 按键信息获取 贪吃蛇游戏设计游戏前的初始化设置窗口的大小和名称本地化设置 宽字符Waht …

金士顿U盘被写保护的解决方法

1.适用的U盘芯片信息 USB设备ID: VID 0951 PID 1666 设备供应商: Kingston 设备名称: DataTraveler 3.0 设备修订版: 0110 产品制造商: Kingston 产品型号: DataTraveler 3.0 产品修订版: PMAP 主控厂商: Phison(群联) 主控型号: PS2251-07(PS2307) - F/W 08.03.50 [2018-…

ViewModel原理分析

认识 ViewModel ViewModel 是一种用来存储和管理UI相关数据的类。 ViewModel 的作用可以从两个方面去理解&#xff1a; UI界面控制器&#xff1a;在最初的MVC模式中&#xff0c;由于 Activity / Fragment 承担的职责过重&#xff0c;因此在后续的 MVP、MVVM 模式中&#xff…

【C++进阶】模板与仿函数:C++编程中的泛型与函数式编程思想

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f921;往期回顾&#x1f921;&#xff1a;栈和队列相关知识 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀模板进阶 &#x1f9e9;<&…

OpenGauss数据库-8.权限管理

第2关&#xff1a;权限设置 gsql -d postgres -U gaussdb -W passwd123123 CREATE ROLE lily WITH CREATEDB PASSWORD passwd123123; GRANT lily TO gaussdb; 第3关&#xff1a;管理员 gsql -d postgres -U gaussdb -W passwd123123 CREATE USER peter WITH SYSADMIN PASSWOR…