常见前端面试之VUE面试题汇总八

22. Vue 子组件和父组件执行顺序 加载渲染过程:

1.父组件 beforeCreate

2.父组件 created

3.父组件 beforeMount

4.子组件 beforeCreate

5.子组件 created

6.子组件 beforeMount

7.子组件 mounted

8.父组件 mounted

更新过程:

1. 父组件 beforeUpdate

2.子组件 beforeUpdate

3.子组件 updated

4.父组件 updated

销毁过程:

1. 父组件 beforeDestroy

2.子组件 beforeDestroy

3.子组件 destroyed

4.父组件 destoryed

23. created 和 mounted 的区别

created:在模板渲染成 html 前调用,即通常初始化某些属性值,然 后再渲染成视图。

mounted:在模板渲染成 html 后调用,通常是初始化页面完成后,再 对 html 的 dom 节点进行一些需要的操作。

4. 一般在哪个生命周期请求异步数据

我们可以在钩子函数 created、beforeMount、mounted 中进行调用,因为在这三个钩子函数中,data 已经创建,可以将服务端端返回的 数据进行赋值。

推荐在 created 钩子函数中调用异步请求,因为在 created 钩子函 数中调用异步请求有以下优点:

能更快获取到服务端数据,减少页面加载时间,用户体验更好;

SSR 不支持 beforeMount 、mounted 钩子函数,放在 created 中有 助于一致性。

24. keep-alive 中的生命周期哪些

keep-alive 是 Vue 提供的一个内置组件,用来对组件进行缓存——在组件切换过程中将状态保留在内存中,防止重复渲染 DOM。

如果为一个组件包裹了 keep-alive,那么它会多出两个生命周期:deactivated、activated。同时,beforeDestroy 和 destroyed 就 不会再被触发了,因为组件不会被真正销毁。

当组件被换掉时,会被缓存到内存中、触发 deactivated 生命周期;当组件被切回来时,再去缓存里找这个组件、触发 activated 钩子 函数。

25. 路由的 hash 和 history 模式的区别

Vue-Router 有两种模式:hash 模式和 history 模式。默认的路由模 式是 hash 模式。

1. hash 模式

简介: hash 模式是开发中默认的模式,它的 URL 带着一个#,例如:,它的 hash 值就是#/vue

特点:hash 值会出现在 URL 里面,但是不会出现在 HTTP 请求中,对 后端完全没有影响。所以改变 hash 值,不会重新加载页面。这种模 式的浏览器支持度很好,低版本的 IE 浏览器也支持这种模式。hash 路由被称为是前端路由,已经成为 SPA(单页面应用)的标配。

原理: hash 模式的主要原理就是 onhashchange()事件:

使用 onhashchange()事件的好处就是,在页面的 hash 值发生变化时,无需向后端发起请求,window 就可以监听事件的改变,并按规则加 载相应的代码。除此之外,hash 值变化对应的 URL 都会被浏览器记

录下来,这样浏览器就能实现页面的前进和后退。虽然是没有请求后 端服务器,但是页面的 hash 值和对应的 URL 关联起来了。

2. history 模式

简介: history 模式的 URL 中没有#,它使用的是传统的路由分发模 式,即用户在输入一个 URL 时,服务器会接收这个请求,并解析这个 URL,然后做出相应的逻辑处理。

特 点 :当 使 用 history 模 式 时 , URL 就 像 这 样 :。相比 hash 模式更加好看。但是,history 模式需要后台配置支持。如果后台没有正确配置,访问时会返回 404。

API: history api 可以分为两大部分,切换历史状态和修改历史状 态:

修 改 历 史 状 态 : 包 括 了 HTML5 History Interface 中 新 增 的 pushState() 和 replaceState() 方法,这两个方法应用于浏览器的 历史记录栈,提供了对历史记录进行修改的功能。只是当他们进行修 改时,虽然修改了 url,但浏览器不会立即向后端发送请求。如果要 做到改变 url 但又不刷新页面的效果,就需要前端用上这两个 API。

切换历史状态: 包括 forward()、back()、go()三个方法,对应浏 览器的前进,后退,跳转操作。

虽然 history 模式丢弃了丑陋的#。但是,它也有自己的缺点,就是 在刷新页面的时候,如果没有相应的路由或资源,就会刷出 404 来。

如果想要切换到 history 模式,就要进行以下配置(后端也要进行配 置):

3. 两种模式对比

调用 history.pushState() 相比于直接修改 hash,存在以下优势:

pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL;而 hash 只可修改 # 后面的部分,因此只能设置与当前 URL 同文档的 URL;

pushState() 设置的新 URL 可以与当前 URL 一模一样,这样也会把 记录添加到栈中;而 hash 设置的新值必须与原来不一样才会触发动 作将记录添加到栈中;

pushState() 通过 stateObject 参数可以添加任意类型的数据到记 录中;而 hash 只可添加短字符串;

pushState() 可额外设置 title 属性供后续使用。

hash 模式下,仅 hash 符号之前的 url 会被包含在请求中,后端如果 没有做到对路由的全覆盖,也不会返回 404 错误;history 模式下,前端的 url 必须和实际向后端发起请求的 url 一致,如果没有对用的 路由处理,将返回 404 错误。

hash 模式和 history 模式都有各自的优势和缺陷,还是要根据实际 情况选择性的使用。


http://www.niftyadmin.cn/n/4969029.html

相关文章

Spring 容器启动耗时统计

为了了解 Spring 为什么会启动那么久,于是看了看怎么统计一下加载 Bean 的耗时。 极简版 几行代码搞定。 import org.springframework.beans.BeansException; import org.springframework.beans.factory.config.BeanPostProcessor;import java.util.HashMap; imp…

FPGA应用于图像处理

FPGA应用于图像处理 FPGA(Field-Programmable Gate Array)直译过来就是现场可编程门阵列。是一种可以编程的逻辑器件,具有高度的灵活性,可以根据具体需求就像编程来实现不同的功能。 FPGA器件属于专用的集成电流中的一种半定制电…

实现SSM简易商城项目的商品优惠券功能

实现SSM简易商城项目的商品优惠券功能 在这篇博客中,我们将学习如何在SSM简易商城项目中实现商品优惠券功能。通过这个功能,用户可以在购买商品时使用优惠券,以享受折扣或其他优惠。 要实现简易商城项目的商品优惠券功能,可以考虑…

保证MQ的高可用的几种方案

推荐阅读 AI文本 OCR识别最佳实践 AI Gamma一键生成PPT工具直达链接 玩转cloud Studio 在线编码神器 玩转 GPU AI绘画、AI讲话、翻译,GPU点亮AI想象空间 资源分享 史上最全文档AI绘画stablediffusion资料分享 AI绘画关于SD,MJ,GPT,SDXL百科全书 「java、python面试题」…

2023年国家自然科学基金

文章目录 原文来源原文 关于2023年国家自然科学基金集中接收申请项目评审结果的通告 国科金发计〔2023〕62号 2023年国家自然科学基金项目申请集中接收期间,国家自然科学基金委员会(以下简称自然科学基金委)共接收项目申请304333项,经初审和复审后共受理303329项。根据《…

Java单元测试 JUnit 5 快速上手

一、背景 什么是 JUnit 5?首先就得聊下 Java 单元测试框架 JUnit,它与另一个框架 TestNG 占据了 Java领域里单元测试框架的主要市场,其中 JUnit 有着较长的发展历史和不断演进的丰富功能,备受大多数 Java 开发者的青睐。 而说到…

章节 1:入门React.js -《React.js手把手教程:从初学者到实战高手》- 第一部分:React.js基础

《React.js手把手教程:从初学者到实战高手》 第一部分:React.js基础 章节 1:入门React.js 了解React.js 在我们开始探索React.js的奇妙世界之前,让我们先来认识一下这个“人人都在谈论”的家伙。你可以把React.js想象成是一个全…

Vulnhub: DriftingBlues: 1靶机

kali:192.168.111.111 靶机:192.168.111.215 信息收集 端口扫描 nmap -A -sC -v -sV -T5 -p- --scripthttp-enum 192.168.111.215 80端口首页源码 访问noteforkingfish.txt,发现为Ook!加密的密文 解密后提示需要用户eric和修改hosts文件&…