当前位置: 首页 > news >正文

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 的操作。

相关文章:

Vue 面试通杀秘籍

理论篇: 1. 说说对 Vue 渐进式框架的理解(腾讯医典) a) 渐进式的含义: 主张最少, 没有多做职责之外的事 b) Vue 有些方面是不如 React,不如 Angular.但它是渐进的,没有强主张, 你可以在原有…...

聚焦新版综合编程能力面试考查汇总

目录 一、业务性编程和广度能力考查 (一)基本定义 (二)必要性分析 二、高频考查样题(编程扩展问法) 考题1: 用java 代码实现一个死锁用例,说说怎么解决死锁问题?(高…...

[工具探索]英寸vs毫米下常见尺寸排版

文章目录 常见尺寸1. 照片尺寸2. 纸张尺寸3. 显示器和电视屏幕尺寸4. 手机屏幕尺寸5. 笔记本电脑屏幕尺寸6. 其他设备尺寸 换算公式换算方法常见照片尺寸对比表国际标准ISO(216)纸张尺寸 什么是英寸? 英寸(英语:inch&a…...

Mimio安装

mkdir -p /usr/local/develop/minio/bin mkdir -p /usr/local/develop/minio/bin wget https://dl.min.io/server/minio/release/linux-amd64/minio -O /usr/local/develop/minio/bin/minio 编辑脚本 启动脚本 vim /usr/local/develop/minio/start_minio.sh #!/bin/bash # 设…...

RawChat:优化AI对话体验,全面兼容GPT功能平台

文章目录 一、Rawchat简介1.1 RawChat的主要特性1.2 RawChat的技术原理简述 二、使用教程三、案例应用3.1 图片内容分析3.2 生图演示3.3 文档解析3.4 探索更多 四、小结 一、Rawchat简介 RawChat平台的诞生,其核心理念是降低用户访问类似ChatGPT这类先进AI服务的门…...

一文详解PaaS平台:机遇、挑战与新变革

随着信息化发展,数字技术与经济社会各个领域的融合逐渐深入,行业需求不断升级,逐渐呈现多样化、复杂性的态势。传统软件开发模式,耗时耗力,已经难以应对企业新形势下的业务需求。面对挑战,PaaS平台以其天然…...

Go每日一库之rotatelogs

介绍 Golang的rotatelogs库是一个用于日志轮转(log rotation)的库。日志轮转是一种常用的日志管理策略,它允许开发者将日志按照一定规则分割成多个文件,以便于管理和分析。通过使用rotatelogs库,开发者可以方便地实现…...

我的网络安全之路——一场诗意的邂逅

文章来源|MS08067 安全实验室 本文作者:tuooo 我的网络安全之路 一场诗意的邂逅 童年的星光中,我仰望着璀璨的荧屏,心怀对未知机器世界的浩瀚与好奇。那时的我,每每想到各种游戏的破解版本与工具,便会被技术…...

Android 中USB-HID协议实现

前言 所有通过USB连接android设备进行通讯的步骤都是大同小异:查询usb设备列表 ——>匹配对应的设备类型(如productid , vendorId)等——>连接usb设备,找到连接通讯的节点——>配置通讯信息,进行通讯。以上是…...

学习AI 机器学习,深度学习需要用到的python库

学习人工智能(AI)时,Python是最流行的编程语言之一。以下是一些常用的Python库和工具,它们可以帮助你入门并深入学习AI和机器学习: 数据处理和分析库 NumPy: 用于处理大型多维数组和矩阵运算,并提供数学函…...

计算机网络 期末复习(谢希仁版本)第8章

元文件就是一种非常小的文件,它描述或指明其他文件的一些重要信息。这里的元文件保存了有关这个音频/视频文件的信息。 10. 流式:TCP;流式实况:UDP。...

abap 多线程运行demo

SAP 提供多种多线程的方法去优化程序的执行效率 1.分别执行多个job 2.Call function STARTING NEW TASK 3.直接使用SAP 提供的SPTA 框架函数:SPTA_PARA_PROCESS_START_2 本次,我们着重来介绍一下三种方法中函数的使用方法 获取空闲线程数:SPBT_INITIALIZE *&------…...

python科研做图系列之时序图的绘制——对比折线图

参考知乎 折线图 我需要从两个不同的excel都读取第一列作为时间列,第二列作为编码列。 在同一张图上画出两条时间序列的折线图 横坐标是分钟,纵坐标是编码 帮我画的好看一些,记得解决中文乱码问题 英文版折线图 ,先搞个英文版,导师要求中文的话,再换成中文版 impor…...

数字信号处理:关于锁存器Latch的发现

关于锁存器的发明,有下面一段伪历史,所谓伪历史,就是我不想去考证发明人是否有这样一条思路,但是这肯定算是一个思路。 伪历史是这样开始的,人们先发明了反相器,就如下图所示。 接着,人们开始考…...

C++ | Leetcode C++题解之第140题单词拆分II

题目&#xff1a; 题解&#xff1a; class Solution { private:unordered_map<int, vector<string>> ans;unordered_set<string> wordSet;public:vector<string> wordBreak(string s, vector<string>& wordDict) {wordSet unordered_set(w…...

JVM (四)GC过程

一。概述 程序计数器、虚拟机栈、本地方法栈都是随线程生灭&#xff0c;栈帧随着方法的进入和退出做入栈和出栈操作&#xff0c;实现了自动的内存清理&#xff0c;因此&#xff0c;内存垃圾回收主要集中于Java堆和方法区中。 GC整体流程示意图&#xff1a; ① 年轻代对象的移动…...

Web前端自学初中:探索与突破

Web前端自学初中&#xff1a;探索与突破 在数字化时代&#xff0c;Web前端技术成为了连接用户与互联网世界的桥梁。对于初中生而言&#xff0c;自学Web前端不仅可以培养他们的逻辑思维能力&#xff0c;还能为他们打开一扇通往技术世界的大门。然而&#xff0c;这一过程中充满了…...

音视频开发26 FFmpeg 时间问题整理

time_base 、pts、dts、duration time_base&#xff1a;时间基&#xff0c;所谓时间基表示的就是每个刻度是多少秒 &#xff0c;例如 如果把1秒分为25等份&#xff0c;你可以理解就是一把尺&#xff0c;那么每一格表示的就是1/25秒。此时的time_base{1&#xff0c;25} &#xf…...

设计模式之MVC模式

文章目录 MVC模式概要意图主要解决的问题使用场景实现方式关键代码应用实例特点优点缺点 使用建议注意事项 代码实现 MVC模式 MVC 模式代表 Model-View-Controller&#xff08;模型-视图-控制器&#xff09; 模式。这种模式用于应用程序的分层开发。 Model&#xff08;模型&a…...

u盘数据要在哪台电脑上恢复?u盘数据恢复后保存在哪里

在数字化时代&#xff0c;U盘已成为我们日常生活中不可或缺的数据存储设备。然而&#xff0c;由于各种原因&#xff0c;U盘中的数据可能会意外丢失&#xff0c;这时数据恢复就显得尤为重要。但是&#xff0c;很多人对于在哪台电脑上进行U盘数据恢复以及恢复后的数据应保存在哪里…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...