前端面试——八股文

news2024/9/19 8:03:40

一、Vue2篇

1. 关于生命周期

1.1 生命周期有哪些？发送请求在created还是mounted？
请求接口测试：https://fcm.52kfw.cn/index.php?_mall_id=1&r=api/default/district

Vue2.x系统自带有8个

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

发送请求在created还是mounted？

这个问题具体要看项目和业务的情况了，因为组件的加载顺序是，父组件引入了子组件，那么先执行父的前3个生命周期，再执行子的前4个生命周期，那么如果我们的业务是父组件引入子组件，并且优先加载子组件的数据，那么在父组件中当前的请求要房mounted中，如果当前组件没有依赖关系那么放在哪个生命周期中请求都是可以的。
1.2 为什么发送请求不在beforeCreate里？beforeCreate和created有什么区别？

为什么发送请求不在beforeCreate里？

因为：如果请求是在methods封装好了，在beforeCreate调用的时候，beforeCreate阶段是拿不到methods里面的方法的（会报错了）。

beforeCreate和created有什么区别？

beforeCreate没有$data
created中有$data

created是可以拿到methods的方法的
beforeCreate拿不到methods的方法
1.3 在created中如何获取dom
1. 只要写异步代码，获取dom是在异步中获取的，就可以了。
	例如：setTimeout、请求、Promise.xxx()等等...
2. 使用vue系统内置的this.$nextTick
1.4 一旦进入组件会执行哪些生命周期？
beforeCreate
created
beforeMount
mounted
1.5 第二次或者第N次进去组件会执行哪些生命周期？
1.6 父组件引入子组件，那么生命周期执行的顺序是？
父：beforeCreate、created、beforeMount
子：beforeCreate、created、beforeMount、mounted
...
父：mounted
1.7 加入keep-alive会执行哪些生命周期？

在当前组件的基础上额外增加2个生命周期（8+2）

activated 

deactivated

如果当前组件上加入keep-alive会执行5个生命周期

beforeCreate、created、beforeMount、mounted，activated 
...

1.8 你在什么情况下用过哪些生命周期？说一说生命周期使用场景

created ==> 单组件请求

mounted ==> 同步可以获取dom,如果子后父

activated  ==> 判断id是否相等

destroyed ==> 初始化上一次历史记录

2. 关于组件

2.1 组件传值（通信）的方式

父传后代 ( 后代拿到了父的数据 )
1. 父组件引入子组件，绑定数据
	 <List :str1='str1'></List>
	子组件通过props来接收
	props:{
		str1:{
			type:String,
			default:''
		}
	}
	***这种方式父传子很方便，但是父传给孙子辈分的组件就很麻烦（父=》子=》孙）
	这种方式：子不能直接修改父组件的数据

2. 子组件直接使用父组件的数据
	子组件通过：this.$parent.xxx使用父组件的数据
	这种方式：子可以直接修改父组件的数据
	
3. 依赖注入
	优势：父组件可以直接向某个后代组件传值(不让一级一级的传递)

后代传父 （父拿到了后代的数据）
1. 子组件传值给父组件
	子组件定义自定义事件 this.$emit
2. 父组件直接拿到子组件的数据
	<List ref='child'></List>
	this.$refs.child

平辈之间的传值 ( 兄弟可以拿到数据 ) 

通过新建bus.js文件来做

父传子：

父代码：孙子想要同样的效果同理就好

第二种父传子的形式：

父代码：

依赖注入

子传父：

平辈传值

2.2 父组件直接修改子组件的值

<List ref='child'></List>
this.$refs.child.xxx = 'yyyy';

2.3 子组件直接修改父组件的值

子组件中可以使用：this.$parent.xxx去修改
2.4 如何找到父组件
this.$parent
2.5 如何找到根组件

2.6 keep-alive
2.7 slot
匿名插槽 ：插槽没有名字

具名插槽 ：插槽有名字

 

作用域插槽 ： 传值

 

2.8 如何封装组件

3. 关于Vuex

3.1 Vuex有哪些属性
state ==> 全局共享属性
getters ==> 针对于state数据进行二次计算
mutatioins ==> 存放同步方法的
actions    ==> 存放异步方法的，并且是来提交mutations
modules    ==> 把vuex再次进行模块之间的划分
3.2 Vuex使用state值
this.$store.state.xxx

辅助函数：mapState

以上俩种方式都可以拿到state的值，那么区别是什么？

使用this.$store.state.xxx是可以直接修改vuex的state数据的

使用辅助函数的形式，是不可以修改的

 

 

3.3 Vuex的getters值修改

面试官可能会这样问：组件使用了getters中的内容，组件使用采用v-model的形式会发生什么？

getters是不可以修改的

 

 

3.4 Vuex的mutations和actions区别
相同点：mutations和actions都是来存放全局方法的，这个全局方法return的值拿不到

区别：
	mutations ==》 同步
	actions   ==》 返回的是一个Promise对象，他可以执行相关异步操作
	
mutations是来修改state的值的，actions的作用是来提交mutations
3.5 Vuex持久化存储

为什么刷新后又回到1

Vuex本身不是持久化存储的数据。Vuex是一个状态管理仓库（state：全局属性）==》就是存放全局属性的地方。

实现持久化存储：1. 自己写localStorage  2. 使用vuex-persistedstate插件

插件使用方式：https://www.xuexiluxian.cn/blog/detail/dae4073b07144d3c9abb3e2cc8495922

4. 关于路由

4.1 路由的模式和区别
路由的模式：history、hash

区别：
1. 关于找不到当前页面发送请求的问题
	history会给后端发送一次请求而hash不会
2. 关于项目打包前端自测问题
	hash是可以看到内容的
	history默认情况是看不到内容的
3. 关于表象不同
	hash:#
	history:/
4.2 子路由和动态路由
4.3 路由传值
4.4 导航故障
官网说明：https://v3.router.vuejs.org/zh/guide/advanced/navigation-failures.html#%E6%A3%80%E6%B5%8B%E5%AF%BC%E8%88%AA%E6%95%85%E9%9A%9C

解决：

import VueRouter from 'vue-router'
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function (location) {
  return routerPush.call(this, location).catch(error => error)
}
4.5 $router和$route区别
$router不仅包含当前路由还包含整个路由的属性和方法

$route包含当前路由对象
4.6 导航守卫
1. 全局守卫

	beforeEach 路由进入之前
	afterEach 路由进入之后

2. 路由独享守卫
	
	beforeEnter 路由进入之前

3. 组件内守卫

	beforeRouteEnter 路由进入之前
	beforeRouteUpdate 路由更新之前
	beforeRouteLeave 路由离开之前

 

5. 关于API

5.1 $set
面试官：你有没有碰到过，数据更新视图没有更新的问题==》$set

this.$set(target,key,修改后的值)

 

5.2 $nextTick
$nextTick返回的参数[函数]，是一个异步的。功能：获取更新后的dom

源码|原理：
$nextTick( callback ){
		return Promise.resolve().then(()=>{
			callback();
		})
}
5.3 $refs
来获取dom的
5.4 $el
$el 获取当前组件的根节点
5.5 $data
$data 获取当前组件data数据的
5.6 $children
$children 获取到当前组件的所有子组件的
5.7 $parent
找到当前组件的父组件，如果找不到返回自身
5.8 $root
找到根组件
5.9 data定义数据
数据定义在data的return内和return外的区别：

1. return外：单纯修改这个数据是不可以修改的，因为没有被get/set
2. reutnr内：是可以修改的
5.10 computed计算属性
computed计算属性的结果值，可以修改吗？可以的，需要通过get/set写法

当前组件v-model绑定的值是computed来的，那么可以修改吗？可以的，需要通过get/set写法
5.11 watch
watch:{
  obj:{
    handler(newVal,oldVal){
      console.log( 'obj',newVal , oldVal )
    },
    immediate:true,
    deep:true
  },
}
5.12 methods和computed区别
computed是有缓存机制的，methods是没有缓存机制的（调用几次执行几次）

6. 关于指令

6.1 如何自定义指令
全局：
Vue.directive('demo', {
  inserted: function (a,b,c) {
    console.log( a,b,c );
  }
})

局部：
<script>
export default {
  directives: {
    demo: {
      bind: function (el) {
        console.log( 1 )
      }
    }
  }
}
</script>
6.2 vue单项绑定
双向绑定：v-model

单项绑定：v-bind
6.3 v-if和v-for优先级
vue2中：v-for > v-if

vue3中：v-if > v-for

7. 关于原理

7.1 $nextTick原理
$nextTick功能：获取更新后的dom

$nextTick( callback ){

		return Promise.resolve().then(()=>{
			callback();
		})
		
}
7.2 双向绑定原理

8. axios二次封装

二、Vue3篇

1. Vue2和Vue3区别

1. Vue2 和 Vue3 双向绑定 方法不同

	Vue2 : Object.defineProperty()
			
			***后添加的属性是劫持不到的
		
	Vue3 : new Proxy()
	
			***即使后添加的也可以劫持到
			***还不需要循环

3. $set在vue3中没有，因为new Proxy不需要

4. 关于写法

	vue2是选项式API
	vue3可以向下兼容（选项式API），也可以组合式api或Setup语法糖形式
	
5. v-if和v-for优先级不同了

6. $ref和$children也不同

7. 如果大家还知道其他api不同点，随便说说就可以了

2,vue3如果用setup写怎么组织代码？ 

说明：hooks（就是函数式），主要让功能模块细分（提升项目的维护性）

		解决问题：<script setup>
							//代码==》比较乱
						</script>
面试题：你们vue3写代码的方式 ==〉setup形式

		解决：hooks

 3.vue3如果用setup写如何获取类似于vue2中的this？

import {  getCurrentInstance } from 'vue'
let app = getCurrentInstance();
console.log( app.appContext.app.config.globalProperties.$loading )

4.vue3常用api有哪些？

1. createApp() ==》 创建一个应用实例。
	说明：等于Vue2的==》new Vue()
	使用场景：写插件(封装全局组件会使用)
2. provide/inject ==》依赖注入
	说明：其实就是传值
	使用场景：某一个父组件传值 到后代组件，如果层级过多传递麻烦，所以使用
	缺点：不好维护和查询数据来源
3. directive
	说明：自定义指令
	场景：后台管理系统中的按钮权限控制（ 一个用户拥有某些权限，但是只能查看和修改，不能删除）
4. mixin
	说明：1.全局混入 2. 局部
	场景：可以添加生命周期，我在小程序的分享功能会用到
	缺点：不好维护和查询数据来源
5. app.config.globalProperties
	说明：获取vue这个全局对象的属性和方法
	场景：自己封装插件的时候需要把方法添加到对象中
6. nextTick
	说明：等待下一次 DOM 更新刷新的工具方法 ：nextTick返回一个Pormise，回调函数是放在Promise中的，所以是异步执行的
	场景：就是把dom要更新，那么vue是数据驱动dom，所以数据的赋值就要在nextTick进行
7. computed
	说明：计算属性
	场景：有缓存
8. reactive、ref
	说明：来定义数据的和vue2的data类似
9. watch
	说明：监听（Vue3不需要深度监听）
10. markRaw()
	说明：不被new Proxy代理，说白了就是静态的数据
11. defineProps() 
	说明：父组件传递的值，子组件使用setup的形式，需要用defineProps接收
12. defineEmits()
	当前组件使用setup形式，自定义事件需要使用defineEmits
13. slot
	说明：分为 1. 匿名 2. 具名 3. 作用域
	场景：后台管理系统，左侧是固定菜单，右侧是不固定内容，那么右侧就是slot

5.请介绍一下vue3常的响应式数据类型

ref ：基本类型
reactive ：复杂类型
toRef ：解构某一个值
toRefs ： 解构多个值

6.请介绍一下teleport组件及其使用场景

teleport组件是一个传送门
假如自己写弹出框，需要在页面居中位置展示，不受当前组件的限制，可以把盒子传送到body中

7.面试题：v-if和v-show区别 

1. 展示形式不同
v-if是 创建一个dom节点
v-show 是display:none 、 block

2. 使用场景不同
初次加载v-if要比v-show好，页面不会做加载盒子
频繁切换v-show要比v-if好，创建和删除的开销太大了，显示和隐藏开销较小

面试题：nextTick是什么?

获取更新后的dom内容

面试题：scoped原理

1. 作用：让样式在本组件中生效，不影响其他组件。
2. 原理：给节点新增自定义属性，然后css根据属性选择器添加样式。

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

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

相关文章

电子签合同区块链存证合约小程序开源版开发

电子签合同区块链存证合约小程序开源版开发

电子签合同区块链存证合约小程序开源版开发 电子合同底层对接的腾讯电子签接口&#xff0c;支持自定义模版发起合同和文件发起合同&#xff0c;支持骑缝章&#xff0c;多方签署&#xff0c;腾讯至信链提供区块链存证&#xff0c;安全高效签署合同文书。 特色功能 自定义合同模…
阅读更多...
(计算机论文)基于SpringBoot和Vue的台球赛事服务网站的设计与实现

(计算机论文)基于SpringBoot和Vue的台球赛事服务网站的设计与实现

毕业设计&#xff08;论文&#xff09; 博主可接毕设论文&#xff01;&#xff01;&#xff01; 基于SpringBoot和Vue的台球赛事服务网站的设计与实现 摘 要 在快速发展的信息时代&#xff0c;体育竞赛作为群众文化娱乐的一部分&#xff0c;已日益受到广泛关注。台球&#xff…
阅读更多...
Windows—线程基本知识和线程同步

Windows—线程基本知识和线程同步

线程 线程的组成 线程的内核对象&#xff0c;操作系统用它来对线程实施管理。内核对象也是系统用来存放线程统计信息的地方。线程堆栈&#xff0c;它用于维护线程在执行代码时需要的所有函数参数和局部变量 线程的进入点 每个线程必须拥有一个进入点函数&#xff0c;线程从…
阅读更多...
备战2024年全国大学生数学建模竞赛：多波束测线问题的解题与优化

备战2024年全国大学生数学建模竞赛：多波束测线问题的解题与优化

目录 一、引言 二、问题分析 三、解题思路与模型建立 问题1&#xff1a;覆盖宽度及重叠率计算 问题2&#xff1a;不同测线方向的覆盖宽度 问题3&#xff1a;最短测线的设计 问题4&#xff1a;基于单波束数据的测线设计 四、知识点解析 五、结果讨论与总结 六、模型的评…
阅读更多...
X86架构(六)——硬盘访问与控制

X86架构(六)——硬盘访问与控制

在前面几节中&#xff0c;我们总是通过ROM-BIOS从硬盘的主引导扇区读取一段程序并加载到内存运行&#xff0c;但是处理器是如何访问硬盘呢&#xff1f;这是一个值得我们思考的问题 OK&#xff0c;我们先看一张图 所有这些和计算机主机连接的设备&#xff0c;叫做外围设备,也叫…
阅读更多...
240831-Qwen2-VL-7B/2B部署测试

240831-Qwen2-VL-7B/2B部署测试

A. 运行效果 B. 配置部署 如果可以执行下面就执行下面&#xff1a; pip install githttps://github.com/huggingface/transformers accelerate否则分开执行 git clone https://github.com/huggingface/transformers cd transformers pip install . accelerate随后&#xff0…
阅读更多...
8.27FLEX，BISON

8.27FLEX，BISON

RC ParseStage::handle_request(SQLStageEvent *sql_event) 这个意思是返回类型是RC&#xff0c;然后用到的函数来自 ParseStage&#xff0c;&#xff1a;&#xff1a;就是用来标识作用域的&#xff0c;函数名是handle_request&#xff0c;是ParseStage里的函数 FLEX BISON
阅读更多...
vue.js项目实战案例详细源码讲解

vue.js项目实战案例详细源码讲解

​ 大家好&#xff0c;我是程序员小羊&#xff01; 前言&#xff1a; 为帮助大家更好地掌握Vue.js项目的开发流程&#xff0c;我将为你讲解一个完整的Vue.js实战案例&#xff0c;并提供详细的源码解析。这个案例将涵盖从项目创建到实现各种功能模块的全过程&#xff0c;适合用于…
阅读更多...
组织培训如何分组？

组织培训如何分组？

在组织培训活动时&#xff0c;合理分组是提高效率和参与度的关键。云分组小程序提供了一个简单而有效的解决方案&#xff0c;帮助组织者快速、公平地将参与者分配到不同的小组中。以下是使用云分组小程序进行培训分组的详细步骤&#xff1a;一、创建分组 1. 打开云分组小程序。…
阅读更多...
入坑大模型18个月的反思与贩私

入坑大模型18个月的反思与贩私

前几天开完一个有高层参加的会议&#xff0c;会后组里的技术大佬直接就开喷“要规划没规划&#xff0c;整天只知道对着几个糊弄老板的榜使劲刷”。我下意识地赶紧去拉住他&#xff0c;低声对他讲“你声音太小了&#xff0c;老板听不到的&#xff0c;回头我领你去大厦的保安室&a…
阅读更多...
Docker容器技术（下）超多好上手的实验，保姆级教程

Docker容器技术（下）超多好上手的实验，保姆级教程

文章目录 Docker数据卷管理及优化为什么要使用数据卷bind mount数据卷docker managed数据卷Data Volume Container&#xff08;数据卷容器&#xff09;bind mount数据卷 VS docker managed数据卷备份与迁移数据卷 Docker的安全优化Docker的资源限制限制CPU的使用限制CPU的使用量…
阅读更多...
RAG重磅升级：DSF带来特定领域精准提升的全新方案！

RAG重磅升级：DSF带来特定领域精准提升的全新方案！

检索增强生成&#xff08;Retrieval-Augmented Generation, RAG&#xff09;是一种结合了检索&#xff08;Retrieval&#xff09;和生成&#xff08;Generation&#xff09;能力的框架&#xff0c;通过从背景数据中检索相关信息来增强模型的生成输出。在当前的大型语言模型&…
阅读更多...
Linux 安装mysql 数据库通用教程（rpm傻瓜安装）

Linux 安装mysql 数据库通用教程（rpm傻瓜安装）

通用教程&#xff1a;Centos7.9安装mysql8.0.39&#xff08;使用rpm 安装&#xff09; 目录 前言 下载镜像源 删除或查看旧版本 安装mysql 启动mysql mysql授权远程登录 前言 在本篇博客中&#xff0c;我将向您展示如何在CentOS 7.9系统上通过RPM包安装特定版本的MySQL…
阅读更多...
神经网络搭建实战与Sequential的使用

神经网络搭建实战与Sequential的使用

一、需要处理的图像 二、对上述图片用代码表示&#xff1a; import torch from torch import nn from torch.nn import Conv2d, MaxPool2d, Flatten, Linearclass SUN(nn.Module):def __init__(self):super(SUN, self).__init__()self.conv1 Conv2d(3, 32, 5, padding2)self…
阅读更多...
解决移动端使用Vant van-overlay 遮罩层导致的弹窗不可滚动问题

解决移动端使用Vant van-overlay 遮罩层导致的弹窗不可滚动问题

项目场景 在游戏门户网站需要根据弹出层列举出自己背包的饰品&#xff0c;然后进行选择置换。 问题描述 例如&#xff1a;在PC端的时候能物品过多的时候能正常左右滚动&#xff0c;而且启用Google的开发者工具进行查看的时候也是能正常滚动&#xff0c;但是在手机端访问的时候…
阅读更多...
持续集成与持续部署（CI/CD）的深入探讨

持续集成与持续部署（CI/CD）的深入探讨

在现代软件开发中&#xff0c;持续集成&#xff08;CI&#xff09;和持续部署&#xff08;CD&#xff09;已成为不可或缺的实践。这些方法旨在加快软件交付的速度&#xff0c;同时提高软件的质量和稳定性。通过CI/CD&#xff0c;开发团队可以频繁地将代码更改集成到主分支&…
阅读更多...
Mate 60、Mate X5和Pocket 2新增AI修图功能：AI消除能力效果惊艳

Mate 60、Mate X5和Pocket 2新增AI修图功能：AI消除能力效果惊艳

你有没有试过拍照的时候不小心把路人拍进来&#xff0c;或者拍风景的时候有煞风景的事物闯入镜头中&#xff1f;有些美好的画面稍纵即逝、有些景点不复存在&#xff0c;看着略带瑕疵的照片&#xff0c;多少会感觉有点遗憾。 最近Mate 60、Mate X5和Pocket 2三款机型都进行了鸿…
阅读更多...
Python sys.path与-m参数的作用

Python sys.path与-m参数的作用

文章目录 Python sys.path与-m参数的作用sys.path作用验证结论 Python sys.path与-m参数的作用 sys.path作用 sys.path‌当试图导入一个模块时&#xff0c;Python解释器会按照sys.path中列出的路径顺序搜索对应的模块文件。 sys.path的组成包括当前目录&#xff08;即包含你…
阅读更多...
二叉树相关练习

二叉树相关练习

二叉树相关oj题&#xff1a; 对称二叉树 解题思路&#xff1a;判断一棵树是否轴对称&#xff0c;先判断左右子树结构是否相同&#xff0c;结构相同的情况下再判断对应的val是否轴对称&#xff0c;判断根节点的左右子树&#xff0c;再判断根节点的左右子树的左右子树是否轴对称…
阅读更多...
《潮骚》爱恋的心如海潮般骚动，又如大海般广袤平静

《潮骚》爱恋的心如海潮般骚动，又如大海般广袤平静

《潮骚》爱恋的心如海潮般骚动&#xff0c;又如大海般广袤平静 三岛由纪夫&#xff08;1925-1970&#xff09;,日本当代小说家、剧作家、记者、电影制作人和电影演员&#xff0c;右翼分子。主要作品有《金阁寺》《潮骚》《丰饶之海》等。曾3次获诺贝尔文学奖提名&#xff0c;属…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023