面试成功的不二法门：详解Vue3答题章法

在这里插入图片描述

前言

面试题在网络上有如海洋之深，对于同一知识点，每个人的理解也各有千秋。我们在面试中常常会遇到一个瞬息间脑海里一片空白的情况，其实这并不是因为我们不懂，而是因为我们在回答的时候缺乏一个清晰的思路。那么问题来了，我们如何能逐步唤醒自己的记忆，娓娓道来呢？

其他前端面试题精选

# 《如何在面试中娓娓道来》前端篇

方法展开

本篇从十个vue面试题案例逐步分解回答步骤，简单概括即为从一句简概的描述出发，将一个问题往自己擅长的部分引导。

比如vue面试题常常就会被问到3版本与2版本的比较。其实我们在准备过程中总会遇到这种多种特性描述一个问题的情况，引导式先将自己擅长的部分提出，后加展开描述，其实剩下的就是我们相对记忆薄弱的区块，就像答题我们先将会的答完，再挖掘自己需要“争取”的另一部分，这样既保证一部分得分，又不会因为没有章法而慌张。

Vue3

题目汇总

  1. 请解释Vue3中的Composition API是什么以及它的用途？
  2. Vue3中的reactive和ref有什么区别？
  3. 如何在Vue3中实现双向绑定？
  4. Vue3的Proxy是如何工作的？
  5. 请解释Vue3中的Teleport特性及其用途？
  6. 如何在Vue3中使用Suspense组件？
  7. Vue3中的script setup语法是什么？
  8. 如何在Vue3中使用provide和inject？
  9. vue3和vue2相比，有什么优化？
  10. 如何在Vue3中使用自定义指令？

解答篇

1. 请解释Vue3中的Composition API是什么以及它的用途？

引导式回答：

关键词：组合式API，区别于vue2的选项式API。

展开式回答：

Composition API是一种新的代码组织方式。

它是一个可选的、高级的、基于函数的API，可以让你更自由地组织和复用代码。与vue2的选项式api相比，Composition API允许你按照逻辑关系组织代码，你可以把相关的数据和方法组织在一起，形成一个可复用的逻辑单元，方便后期提取hooks。

这大大提高了代码的可读性和可维护性。（其实也算一种js写法的回归）

2. Vue3中的reactive和ref有什么区别？

引导式回答：

reactive和ref都是用来创建响应式数据的。

展开式回答：

最主要的区别在于：

  1. reactive是用来创建响应式对象的。你可以使用reactive来包装一个普通的JavaScript对象，然后返回一个响应式的代理版本。这个代理会追踪其依赖，并在其依赖变更时进行更新。
const state = reactive({ count: 0 })
  1. ref是用来创建一个响应式的值的。它返回一个具有.value属性的对象，这个对象的.value属性是响应式的。你可以将ref用于单个值，如字符串或数字。
const count = ref(0)
  • reactive处理的是对象，你可以直接访问和修改对象的属性，无需使用.value。
  • ref处理的是单个值，访问或修改值时，需要通过.value属性。

3. 如何在Vue3中实现双向绑定？

引导式回答：

依赖于 v-model 指令。

展开式回答：

  • 非自定义组件使用（普通使用）：
<template><input v-model="message" />
</template><script>
import { ref } from 'vue';
export default {setup() {const message = ref('');return { message };},
};
</script>
  • 自定义组件使用

在自定义组件上使用 v-model 时，情况会有些不同，组件内部必须通过 emits 选项显式地触发 'update:modelValue' 事件来更新父组件的数据。

  1. 首先，在自定义组件中，你需要接收一个名为modelValue的prop。这个prop代表了父组件希望与子组件双向绑定的值。
props: {modelValue: {type: String, // 或你需要的其他类型default: ''}
}
  1. 当需要更新这个值时，你需要在自定义组件中触发一个名为update:modelValue的事件，并传入新的值，如下：
this.$emit('update:modelValue', newValue);

然后你就可以在父组件中使用v-model指令和你的自定义组件进行双向绑定了：

<YourComponent v-model="someValue" />

在这个例子中，当YourComponent触发update:modelValue事件时，父组件中的someValue将会被更新为事件传入的新值。

4. Vue3的Proxy是如何工作的？

引导式回答：

Vue 会使用 Proxy 来包装原始数据，返回一个 Proxy 对象。

（首先提proxy对象——>后续描述修改对象的属性为思路）

展开式回答：

在 Vue3 中，Proxy 对象的作用可以被看作是一种"中间人"。

当你试图获取或修改 Proxy 对象的属性时，这些操作都会被 Proxy “拦截”。

当你尝试访问 Proxy 对象的某个属性时，Proxy 不仅会返回该属性的值，还会告诉 Vue 的响应式系统：“嘿，有人正在访问这个属性。”于是，Vue 就会记下这个操作，将当前的“副作用”（比如渲染函数或计算属性）添加到这个属性的依赖列表中。这样，Vue 就能知道哪些副作用依赖于这个属性。

当你尝试修改 Proxy 对象的某个属性时，Proxy 不仅会改变该属性的值，还会告诉 Vue 的响应式系统：“嘿，有人刚刚修改了这个属性。”于是，Vue 就会找到所有依赖于这个属性的副作用，并重新运行它们，以确保它们使用的是最新的属性值。

通过这种方式，Proxy 对象帮助 Vue 有效地追踪和管理响应式数据的变化，从而实现数据和视图的同步更新。

5. 请解释Vue3中的Teleport特性及其用途。

引导式回答：

关键词：传送门。

将子组件模板部分渲染到DOM的其他位置（顾名思义：传送效果）。

展开式回答：

这个特性在很多场景下都非常有用。

例如，你可能要创建一个模态框（modal），这个模态框要覆盖整个页面，而不仅仅是它的父组件。在 Vue 2 中，你可能需要通过全局组件或其他方法来实现这个功能，但这往往会导致代码的复杂性增加。

而在 Vue 3 中，你可以使用 Teleport 来轻松实现这个功能。

你可以通过 <teleport to="目标元素的选择器"> 来使用 Teleport。

例如：

<teleport to="#modal-container"><div class="modal"><!-- 模态框的内容 --></div>
</teleport>

在这个例子中，<div class="modal"> 会被渲染到 id 为 modal-container 的元素内，而不是它的父组件内。

6. 如何在Vue3中使用Suspense组件？

引导式回答：

<Suspense> 是一个内置组件，就好像一个包住礼物的盒子。

（盒子的表面是#fallback的内容，其中的礼物是#default正在准备的东西）

展开式回答：

使用 <Suspense> 的基本步骤如下：

  1. 在你的组件模板中，使用 <Suspense> 包裹起你的异步组件。
<Suspense><template #default><AsyncComponent /></template><template #fallback><div>Loading...</div></template>
</Suspense>
  1. 在上面的代码中，<AsyncComponent /> 是你的异步组件，它可能是通过 defineAsyncComponent() 或者 import() 动态加载的组件。
  2. #default 插槽用于放置异步组件，#fallback 插槽则用于放置备用内容，这个备用内容会在异步组件加载过程中显示。

7. Vue3中的script setup语法是什么？

引导式回答：

关键词：解析语法糖。用于大幅简化组件的写法。

展开式回答：

<script setup>
import { ref } from 'vue';let count = ref(0);
function increment() {count.value++;
}
</script>

在模板中，我们可以直接使用在 <script setup> 中定义的响应式数据和方法，就像它们被定义在 data 或 methods 中一样。

此外，<script setup> 还可以和 defineProps 和 defineEmits 函数一起使用，用于定义组件的 props 和自定义事件。经过这样的改写，整个组件的结构会变得更加清晰。

8. 如何在Vue3中使用provide和inject？

引导式回答：

provide 和 inject 是一对用于依赖注入的 API，主要用于实现组件之间的通信。

展开式回答：

假设我们有一个父组件，我们可以在其中提供一个名为 theme 的数据：

<template><div><ChildComponent /></div>
</template><script setup>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';let theme = ref('light');
provide('theme', theme);
</script>

然后，在任何子组件或孙子组件中，我们都可以使用 inject 来接收这个 theme 数据：

<template><div :class="theme">I'm a child component</div>
</template><script setup>
import { inject } from 'vue';let theme = inject('theme');
</script>

注意几个关键点：

  1. provide 和 inject 主要解决了 Vue 中跨级组件间通信的问题。
  2. provide 和 inject 都可以接收两个参数。第一个参数是提供或注入的属性的名称，第二个参数可选，表示当无法找到提供的属性时要使用的默认值。
  3. 使用 provide 和 inject 的组件并不需要保持直接的父子关系，只要是在一个组件树内，就可以通过这种方式进行数据传递。
  4. 子组件可以覆盖沿组件树向上注入的值，这可能会对你实例树的其他部分产生影响，因此你需要时刻注意这一点。
  5. 在 Vue 2.x 中，provide 和 inject 是选项；而在 Vue 3 中，它们成为了两个函数。

9. vue3和vue2相比，有什么优化？

引导式回答：

更快（速度、体积…） 更简单（setup…） 更强（新特性：传送门、Suspense…）

展开式回答：

  1. 性能提升：Vue 3 在性能方面做了大量优化。它的渲染速度比 Vue 2 快约 1.5~2 倍，而且打包尺寸减少了约 41%。
  2. Composition API：这是 Vue 3 的一个主要特性，它提供了一种更灵活的方式来组织和管理组件的逻辑。这使得在大型项目中管理复杂状态变得更加容易。
  3. 更好的 TypeScript 支持：Vue 3 从一开始就用 TypeScript 重写，因此它提供了更好的 TypeScript 支持。
  4. Fragments：在 Vue 2 中，每个组件必须有一个根元素。但在 Vue 3 中，这个限制被取消了。你可以在一个组件中返回多个根节点，这几乎消除了所有需要额外 DOM 元素的需求。
  5. 更好的自定义指令 API：在 Vue 3 中，自定义指令的 API 更加一致和强大。
  6. Suspense 组件：Vue 3 介绍了 Suspense 组件，用于在组件等待异步操作完成时提供回退内容。
  7. 实验性的 <script setup> 语法：Vue 3.2 引入了 <script setup> 语法，它提供了一种更紧凑的方式来编写单文件组件。
  8. 其他新特性包括：对于 Portal 的原生支持，更强大的计算属性，多个 v-model 支持，以及更好的安全性。

10. 如何在Vue3中使用自定义指令？

引导式回答：

关键词：directive

展开式回答：

我们来创建一个自定义指令叫 v-focus，当页面加载完毕后，此指令可以使一个输入框自动获取焦点。

先定义自定义指令：

import { createApp } from "vue";const app = createApp({});app.directive("focus", {// 当被绑定的元素挂载到 DOM 上时mounted(el) {// 获取焦点el.focus();}
});

然后在模板中使用自定义指令：

<template><input v-focus />
</template>

自定义指令对象可以接受一些函数作为参数：

  • beforeMount：与 Vue 2 中的 bind 钩子相对应，一旦指令被绑定到元素上，就会立即调用这个函数，而不必等到节点插入到 DOM 中。
  • mounted：与 Vue 2 中的 inserted 钩子相对应，一旦绑定的元素插入到父节点中，这个函数就会被调用。
  • beforeUpdate：在元素更新之前触发。
  • updated：在元素更新之后触发。
  • beforeUnmount：在指令从元素上卸载前触发。
  • unmounted：在指令从元素上卸载后触发。

这些函数可以接受三个参数：el，binding 和 vnode，分别代表指令绑定的元素，绑定对象以及虚拟节点。

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

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

相关文章

《魔法与科技的融合：SpringBoot运维的现代传说》

《魔法与科技的融合：SpringBoot运维的现代传说》

揭开了SpringBoot应用部署的神秘面纱。从云平台的选型到Docker的容器化魔法&#xff0c;再到Kubernetes的集群力量&#xff0c;每一步都充满了奇幻色彩。文章以轻松幽默的笔触&#xff0c;带领读者穿梭于现代应用部署的各个角落&#xff0c;探索自动化部署的奥秘&#xff0c;学…
阅读更多...
【深度学习】PuLID: Pure and Lightning ID Customization via Contrastive Alignment

【深度学习】PuLID: Pure and Lightning ID Customization via Contrastive Alignment

论文&#xff1a;https://arxiv.org/abs/2404.16022 代码&#xff1a;https://github.com/ToTheBeginning/PuLID 文章目录 AbstractIntroductionRelated WorkMethods Abstract 我们提出了一种新颖的、无需调整的文本生成图像ID定制方法——Pure and Lightning ID customizatio…
阅读更多...
微信好友朋友圈的三天、半年可见怎么破？方法拿走不谢

微信好友朋友圈的三天、半年可见怎么破？方法拿走不谢

『Code掘金』问大家&#xff0c;有没有这种经历&#xff0c;当你想去翻某人的朋友圈时&#xff0c;对方设置成了3天可见&#xff0c;之前的内容没法看到了。 不过没关系&#xff01;今天『Code掘金』给大家分享一款导出朋友圈的工具&#xff0c;让大家留住痕迹。 WechatMomen…
阅读更多...
初探沁恒CH32V307VCT6评估板 1-1外部中断EXTI

初探沁恒CH32V307VCT6评估板 1-1外部中断EXTI

旋转编码器计次 1&#xff0c;创建 .C .H 文件 Count_Sonser.c Count_Sonser.h 2&#xff0c;包含头文件 #include "ch32v30x.h" //#include "debug.h" #include "Count_Sonser.h" 注意&#xff1a;如果不包含第一第二个头文件uint、int这…
阅读更多...
如何掌握 Java 正则表达式 的基本语法及在 Java 中的应用

如何掌握 Java 正则表达式 的基本语法及在 Java 中的应用

正则表达式是一种用于匹配字符串的模式&#xff0c;在许多编程语言中广泛使用。Java 正则表达式提供了强大的文本处理能力&#xff0c;能够对字符串进行查找、替换、分割等操作。 一、正则表达式的基本语法 正则表达式由普通字符和特殊字符组成。普通字符包括字母、数字和标点…
阅读更多...
网络协议三

网络协议三

数据中心 一、DNS 现在网站的数目非常多&#xff0c;常用的网站就有二三十个&#xff0c;如果全部用 IP 地址进行访问&#xff0c;恐怕很难记住 根 DNS 服务器 &#xff1a;返回顶级域 DNS 服务器的 IP 地址 顶级域 DNS 服务器&#xff1a;返回权威 DNS 服务器的 IP 地址 …
阅读更多...
汇凯金业：贵金属交易规则有哪些

汇凯金业：贵金属交易规则有哪些

贵金属投资目前非常火热&#xff0c;许多投资者从中获得了可观的收益。新手投资者在进入贵金属市场及其交易之前&#xff0c;务必要了解清楚贵金属的交易规则。了解规则和差异能帮助新手更好地进行贵金属投资交易。下面我们以现货类贵金属为例&#xff0c;详细说明贵金属的交易…
阅读更多...
一周学会Django5 Python Web开发 - Django5内置Auth认证系统-用户修改密码实现

一周学会Django5 Python Web开发 - Django5内置Auth认证系统-用户修改密码实现

锋哥原创的Python Web开发 Django5视频教程&#xff1a; 2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~共计59条视频&#xff0c;包括&#xff1a;2024版 Django5 Python we…
阅读更多...
基于springboot的-仓库 管理系统【附：资料➕文档】

基于springboot的-仓库 管理系统【附：资料➕文档】

前言&#xff1a;我是源码分享交流Coding&#xff0c;专注JavaVue领域&#xff0c;专业提供程序设计开发、源码分享、 技术指导讲解、各类项目免费分享&#xff0c;定制和毕业设计服务&#xff01; 免费获取方式--->>文章末尾处&#xff01; 项目介绍&#xff1a; 管理员…
阅读更多...
数字IC后端物理验证PV | TSMC 12nm Calibre Base Layer DRC案例解析

数字IC后端物理验证PV | TSMC 12nm Calibre Base Layer DRC案例解析

基于TSMC 12nm ARM A55 upf flow后端设计实现训练营将于6月中旬正式开班&#xff01;小班教学&#xff01;目前还有3个名额&#xff0c;招满为止&#xff01;有需要可以私信小编 ic-backend2018报名。吾爱IC社区所有训练营课程均为直播课&#xff01; 这个课程支持升级成双核A…
阅读更多...
服务器禁止密码登陆

服务器禁止密码登陆

转载请标明出处&#xff1a;https://blog.csdn.net/donkor_/article/details/139444224 文章目录 一、前言二、编辑sshd_config文件三、重启服务四、总结 一、前言 复杂的密码&#xff0c;登陆服务器的时候&#xff0c;也是很不方便的。并且频繁登陆&#xff0c;暴露给外界&am…
阅读更多...
c++ 里函数选择的优先级：普通函数、模板函数、万能引用，编译器选择哪个执行呢？

c++ 里函数选择的优先级：普通函数、模板函数、万能引用，编译器选择哪个执行呢？

看大师写的代码时&#xff0c;除了在类里定义了 copy 构造函数&#xff0c;移动构造函数&#xff0c;还定义了对形参采取万能引用的构造函数&#xff0c;因此有个疑问&#xff0c;这时候的构造函数优先级是什么样的呢&#xff1f;简化逻辑测试一下&#xff0c;如下图&#xff0…
阅读更多...
【Vue】路由的封装抽离

【Vue】路由的封装抽离

问题&#xff1a;所有的路由配置都在main.js中合适吗&#xff1f; 目标&#xff1a;将路由模块抽离出来。 好处&#xff1a;拆分模块&#xff0c;利于维护 路径简写&#xff1a; 脚手架环境下 指代src目录&#xff0c;可以用于快速引入组件 完整代码 router/index.js // 但…
阅读更多...
探索贷款交易平台的技术架构与创新应用

探索贷款交易平台的技术架构与创新应用

随着金融科技的快速发展&#xff0c;贷款交易平台作为金融行业的重要组成部分&#xff0c;正扮演着越来越重要的角色。本文将深入探讨贷款交易平台的技术架构和创新应用&#xff0c;从前端设计、后端系统、安全保障和智能化服务等方面进行全面解析&#xff0c;帮助读者更好地了…
阅读更多...
【Python报错】已解决AttributeError: list object has no attribute ’shape‘ ( Solved )

【Python报错】已解决AttributeError: list object has no attribute ’shape‘ ( Solved )

解决Python报错&#xff1a;AttributeError: ‘list’ object has no attribute ‘shape’ (Solved) 在Python中&#xff0c;AttributeError表明你试图访问的对象没有你请求的属性或方法。如果你遇到了AttributeError: list object has no attribute shape的错误&#xff0c;这…
阅读更多...
为什么要用Git

为什么要用Git

1. Git是什么 1.1. 概述 Git是分布式版本控制系统&#xff0c;与SVN类似的集中化版本控制系统相比&#xff0c;集中化版本控制系统如果中央服务器宕机则会影响数据和协同开发。 Git是分布式的版本控制系统&#xff0c;客户端不只是提取最新版本的快照&#xff0c;而且将整个…
阅读更多...
【Java毕业设计】基于Java的特色美食推荐网站的设计与实现

【Java毕业设计】基于Java的特色美食推荐网站的设计与实现

文章目录 摘 要ABSTRACT目 录1 概述1.1 研究背景及意义1.2 国内外研究现状1.3 拟研究内容1.4 系统开发技术1.4.1 Java编程语言1.4.2 SpringBoot框架1.4.3 MySQL数据库1.4.4 B/S结构1.4.5 MVC模式 2 系统需求分析2.1 可行性分析2.2 任务概述2.3 功能性需求3.2.2 数据库逻辑结构设…
阅读更多...
外汇天眼：FSCS确认TenetConnect Services Ltd已任命管理人

外汇天眼：FSCS确认TenetConnect Services Ltd已任命管理人

2024年6月5日&#xff0c;Tenet Group Ltd的董事们任命了Interpath Ltd的Ed Boyle、Howard Smith和Rob Spence为联合管理人。Ed Boyle和Rob Spence也被任命为其子公司Tenet Ltd、TenetConnect Ltd和TenetConnect Services Ltd的联合管理人。Tenet Mortgage Services Ltd和Tenet…
阅读更多...
【计算机视觉（8）】

【计算机视觉（8）】

基于Python的OpenCV基础入门——图像直方图 直方图图像直方图 图像直方图代码以及实现效果 直方图 直方图是一种用于描述图像亮度分布的统计工具。它将图像的像素亮度值按照不同的亮度等级进行计数&#xff0c;并以直方图的形式呈现出来。图像直方图可以显示图像中每个亮度级别…
阅读更多...
点击式的excel电子表格查找修改功能，比xlookup和vlookup简单，多列关联查询速度更快

点击式的excel电子表格查找修改功能，比xlookup和vlookup简单，多列关联查询速度更快

经过实际测试&#xff0c;excel的xlookup确实非常简单&#xff0c;有部分功能也非常快。但是有的人不会公式&#xff0c;或者不喜欢用公式&#xff0c;或者没有excel2021以上的版本。而且xlookup确实也有些还不是很完美的地方&#xff0c;比如对多列关联查询很慢。所以我们还是…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023