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

Vue 23进阶面试题:(第八天)

目录

29.vue2.0和vue3.0区别?

30.事件中心的原理

31.使用基于token的登录流程

32.防抖和节流

防抖(debounce)

节流(throttle)


29.vue2.0和vue3.0区别?

1.由选项API转变为组合API。

2.vue3将全局配置挂在了app实例上而不是构造函数上,好处是应用之间的配置互不影响。

//vue2的全局config配置是直接挂在Vue构造函数上的
//例如
Vue.config.errorHandler = (err)=>console.log(err)
//vue3的全局api是在当前应用实例上修改的,不会影响其他应用
//例如
const app1 = createApp(AppComponent1)
const app2 = createApp(AppComponent2)
app1.config.errorHandler.(err)=>console.log(err,'app1')
app2.config.errorHandler.(err)=>console.log(err,'app2')

3.vue3为了减小打包体积,将很多方法都采用了具名导出的方式(如 createApp、nextTick等),这使得初始化实例的方式也有所区别。

4.需要注意的是setup返回的变量都是Ref类型,修改ref的值需要修改ref.value。

5.在setup中,reactive可以为我们集中定义属性。

6.computed接收一个函数,该函数的返回值作为计算属性的值。

7.提供了依赖和注入(provide、inject)。

8.路由写法的差别

vue3的beforeRouteEnter作为路由守卫的示例是因为它在setup语法糖中是无法使用的;大家都知道setup中组件实例已经创建,是能够获取到组件实例的。而beforeRouteEnter是再进入路由前触发的,此时组件还未创建,所以是无法用在setup中的;如果想在setup语法糖中使用则需要再写一个script 如下:

<script>export default {beforeRouteEnter(to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用next()},};
</script>
<script>
import { defineComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'
export default defineComponent({beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用next()},beforeRouteLeave ((to, from, next)=>{//离开当前的组件,触发next()       }),beforeRouteLeave((to, from, next)=>{//离开当前的组件,触发next()      }),setup() {const router = useRouter()const route = useRoute()const toPage = () => {router.push(xxx)}//获取params 注意是routeroute.params//获取queryroute.queryreturn {toPage}},
});
</script>

9.生命周期:vue3提供了在setup中使用的生命周期函数。

/*生命周期函数对应表beforeCreate -> 与setup并行created -> 与setup并行beforeMount -> onBeforeMountmounted -> onMountedbeforeUpdate -> onBeforeUpdateupdated -> onUpdatedbeforeDestroy -> onBeforeUnmountdestroyed -> onUnmounted*/

10.Vue3 把实现响应式原理的Object.defineProperty 换成了 Proxy。

30.事件中心的原理

应用场景 跨多层父子组件通信 兄弟组件通信

Vue 通过事件发射器接口执行实例,实际上你可以使用一个空的 Vue 实例,原理其实就是发布订阅。

可以通过单独的事件中心管理组件间的通信:

// 将在各处使用该事件中心 // 组件通过它来通信 var eventHub = new Vue()

然后在组件中,可以使用 $emit, $on, $off 分别来分发、监听、取消监听事件。

31.使用基于token的登录流程

使用基于Token 的身份验证方法,大概的流程是这样的:

1. 客户端使用用户名跟密码请求登录

2. 服务端收到请求,去验证用户名与密码

3. 验证成功后,服务端会签发一个Token,再把这个 Token 发送给客户端

4. 客户端收到Token 以后可以把它存储起来,比如放在 Cookie 里或者 localStorage 里

5. 客户端每次向服务端请求资源的时候需要带着服务端签发的Token

6. 服务端收到请求,然后去验证客户端请求里面带着的Token,如果验证成功,就向客户端返回请求的数据

32.防抖和节流

防抖(debounce)

所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

节流(throttle)

所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

应用场景:input mousemove scroll resize 目的:减少触发的频度

相关文章:

Vue 23进阶面试题:(第八天)

目录 29.vue2.0和vue3.0区别&#xff1f; 30.事件中心的原理 31.使用基于token的登录流程 32.防抖和节流 防抖&#xff08;debounce&#xff09; 节流&#xff08;throttle&#xff09; 29.vue2.0和vue3.0区别&#xff1f; 1.由选项API转变为组合API。 2.vue3将全局配置…...

Acwing 最小生成树

最小生成树 最小生成树:由n个节点&#xff0c;和n-1条边构成的无向图被称为G的一棵生成树&#xff0c;在G的所有生成树中&#xff0c;边的权值之和最小的生成树&#xff0c;被称为G的最小生成树。&#xff08;换句话说就是用最小的代价把n个点都连起来&#xff09; Prim 算法…...

VIM简要介绍

安装 大多数 Linux 发行版和 macOS 都预装了 VIM。如果没有&#xff0c;你可以通过包管理器安装&#xff1a; Ubuntu/Debian: sudo apt-get install vimFedora: sudo dnf install vimmacOS: brew install vim&#xff08;使用 Homebrew&#xff09;Windows: 可以从 VIM 官网下…...

.NET 6.0 使用log4net配置日志记录方法

1.包管理器引入相关包 2.添加Log4net文件夹和log4net.config配置文件(配置文件属性设为始终复制)。 3.替换 log4net.config的内容(3.1与3.2选择一个就好,只是创建日志文件有所区别) 3.1: <?xml version"1.0" encoding"utf-8"?> <configuration…...

Unity角色控制及Animator动画切换如走跑跳攻击

Unity角色控制及 Animator动画切换如走跑跳攻击 目录 Unity角色控制及 一、 概念 1、角色控制 1) CharacterController(角色控制器) 2) CapsuleCollider + Rigidbody(使用物理刚体控制) 2、角色动画-Animation、Animator 1) 旧版动画系统...

JSP+Servlet+Mybatis实现列表显示和批量删除等功能

前言 使用JSP回显用户列表&#xff0c;可以进行批量删除&#xff08;有删除确认步骤&#xff09;&#xff0c;和修改用户数据&#xff08;用户数据回显步骤&#xff09;使用servlet处理传递进来的请求参数&#xff0c;并调用dao处理数据并返回使用mybatis&#xff0c;书写dao层…...

Cannot read properties of undefined (reading ‘upgrade‘)

前端开发工具&#xff1a;VSCODE 报错信息&#xff1a; INFO Starting development server...10% building 2/2 modules 0 active ERROR TypeError: Cannot read properties of undefined (reading upgrade)TypeError: Cannot read properties of undefined (reading upgrade…...

javaJUC基础

JUC基础知识 多线程 管程 Monitor&#xff0c;也就是平时所说的锁。Monitor其实是一种同步机制&#xff0c;它的义务是保证&#xff08;同一时间&#xff09;只有一个线程可以访问被保护的数据和代码块&#xff0c;JVM中同步是基于进入和退出监视器&#xff08;Monitor管程对…...

std::distance 函数介绍

std::distance 是 C 标准库中的一个函数模板&#xff0c;用于计算两个迭代器之间的距离。它的主要作用是返回从第一个迭代器到第二个迭代器之间的元素数量。这个函数对于不同类型的迭代器&#xff08;如随机访问、双向、前向等&#xff09;都能有效工作。 函数原型 template …...

如何在Windows和Linux之间实现粘贴复制

第一步 sudo apt-get autorremove open-vm-tools第二步 sudo apt-get update第三步 sudo apt-get install open-vm-tools-desktop第四步 一直按Y&#xff0c;希望执行 Y第四步 重启 reboot然后可以实现粘贴复制。...

【第十七章:Sentosa_DSML社区版-机器学习之异常检测】

【第十七章&#xff1a;Sentosa_DSML社区版-机器学习之异常检测】 机器学习异常检测是检测数据集中的异常数据的算子&#xff0c;一种高效的异常检测算法。它和随机森林类似&#xff0c;但每次选择划分属性和划分点&#xff08;值&#xff09;时都是随机的&#xff0c;而不是根…...

【Vue】为什么 Vue 不使用 React 的分片更新?

第一&#xff0c;首先时间分片是为了解决 CPU 进行大量计算的问题&#xff0c;因为 React 本身架构的问题&#xff0c;在默认的情况下更新会进行很多的计算&#xff0c;就算使用 React 提供的性能优化 API&#xff0c;进行设置&#xff0c;也会因为开发者本身的问题&#xff0c…...

大学生科技竞赛系统小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;主办方管理&#xff0c;公告栏管理&#xff0c;竞赛分类管理&#xff0c;竞赛信息管理&#xff0c;报名信息管理&#xff0c;竞赛成绩管理 微信端账号功能包括&#xff1a;系统首…...

什么是聚集索引?

什么是聚集索引&#xff1f; 1、聚集索引的特点2、如何确定聚集索引3、性能优势 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 聚集索引是一种特殊的索引&#xff0c;它直接包含了表中的所有数据行。所以&#xff0c;通过聚集索引&#xf…...

Centos/fedora/openEuler 终端中文显示配置

注意&#xff1a;这里主要解决的是图形界面、远程登录界面的中文乱码问题 系统原生的终端&#xff08;如虚拟机系统显示的终端&#xff09;&#xff0c;由于使用的是十分原始的 TTY 终端&#xff0c;使用点阵字体进行显示&#xff0c;点阵字体不支持中文&#xff0c;因此无法显…...

使用kaggle命令下载数据集和模型

点击用户头像&#xff0c;点击Settings&#xff1a; 找到API&#xff0c;点击create new token&#xff0c;将自动下载kaggle.json&#xff1a; 在用户目录下创建.kaggle文件夹&#xff0c;并将下载的kaggle.json文件移动到该文件夹&#xff1a; cd ~ mv Downloads/kaggle.j…...

生信初学者教程(十一):数据校正

介绍 批次效应在生物学数据分析中是一个普遍存在的问题,它指的是由于实验过程中非生物学因素(如样本处理时间、实验条件、测序平台等)的差异,导致实验结果中混入与研究目标不相关的变异。在比较对照组和实验组时,这些非生物学因素可能引入额外的噪声,影响对生物学问题真实…...

JS设计模式之桥接模式:搭建跨越维度的通路

引言 在软件开发中&#xff0c;我们经常遇到需要对不同的抽象类进行不同的实现的情况&#xff0c;而传统的对象嵌套并不是一个优雅且可扩展的解决方案&#xff0c;因此这正是桥接模式的用武之地。桥接模式通过将抽象与实现分离&#xff0c;使得它们可以独立变化&#xff0c;从…...

苹果电脑系统重磅更新——macOS Sequoia 15 系统 新功能一 览

有了 macoS Sequoia&#xff0c;你的工作效率将再次提升&#xff1a;快速调整桌面布局&#xff0c;一目了然地浏览网页重点&#xff0c;还可以通过无线镜像功能操控你的iPhone。 下面就来看看几项出色新功能&#xff0c;还有能够全面发挥这些功能的 App 和游戏。 macOS Sequo…...

DoppelGanger++:面向数据库重放的快速依赖关系图生成

doi&#xff1a;DoppelGanger: Towards Fast Dependency Graph Generation for Database Replay&#xff0c;点击前往 文章目录 1 简介2 架构概述3 依赖关系图3.1 符号和问题定义3.2 无 IT(k) 图3.3 无 OT 图表3.4 无 OTIT 图表3.5 无 IT[OT] 图表3.6 输出确定性保证 4 重复向后…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...