2024年八股文前端高频面试题(js、vue2、vue3、uniapp、es6、echarts、webpack、算法、git、hr交流、技巧现状）
ASS___ 2024-10-17 15:33:01 阅读 72
内容较多需要分几部
一.vue2面试题 - 生命周期有哪些？发送请求在created还是mounted？
1.1.生命周期有哪些
<code>vue2.X系统自带有8个
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
1.2.进入组件执行哪些生命周期
beforeCreate
created
beforeMount
mounted
1.3在created中如何获取dome
只要异写异步代码,获取dom在异步中获取的就可以
列
定时器方法
setTimeout(()=>{
获取dome的方法
})
vue自带nextTick方法
this.$nextTick(res=>{
获取dome的方法
})
1.4为什么发送请求不在beforeCreate里?
如果请求是在methods封装好的,在beforeCreate掉用的时候是拿不到methods里面的方法的
1.5beforeCreate和created有什么区别
beforeCreate中没有$data
created中有$data
created中是可以拿到methods中的方法的
1.6.父组件引入子组件生命周期执行顺序
父组件引入了子组件,会先执行父组件的前3个生命周期,再执行子组件的4个生命周期
父:beforeCreat、create、beforeMount
子:beforeCreate、create、beforeMount、mounted
...
父:mounted
1.7发送请求在created中mounted?
这个问题需要看具体情况,按照上面的父组件引入子组件的顺序来看,
如果需要优先加载子组件内容需要再mounted中,如果组件间没有依赖关系,在哪个都可以
1.8加入keep-alive组件会执行哪些生命周期
如果使用了keep-alive组件,当前的组件会额外增加两个生命周期(系统8+2)
activated 进入到组件 激活时
deactivated 销毁时
如果加入keep-alive第一次进入会执行5个生命周期
beforeCreate
created
beforeMount
mounted
activated
1.9第二次或者第N次进入组件会执行哪些生命周期
activated
如果没加入keep-valive会永远执行
beforeCreate
created
beforeMount
mounted
2.0你在什么情况下使用过哪些生命周期,说一说生命周期的使用场景
created 单组件请求
mounted 同步获取dom, 如果子组件先请求父组件再请求
activated 判断id是否相同,如果不相同发起请求
deactivated 关闭页面记录视频播放时间,初始化的时候从上一记录开始
二.关于组件
2.1组件传值(通信)的方式
父传后代 (后代拿到了父的数据)
1.子组件通过props来接受父的传参
props:{
str1:{
type:String,
default:''
}
}
*这种方式父传子方便,但是传孙子背比较困难,并且不能修改父组件中的数据*
2.子组件直接使用父组件中的数据
子组件通过 this.$parent.xxx使用父组件中的数据
*子组件可以直接修改父组件中的数据*
*缺点:这可能会破坏组件的封装性和可维护性。*
3.依赖注入
优势:父组件可以直接向某个后代组件传递参数,(不需要一级一级的找)
后代传父(父拿到了后代的数据)
1.子组件传给父组件
子组件自定义事件 this.$emit('事件名字',传值)
父组件 <组件名 @事件='事件名字'> </组件名>
在methods中使用
2.
平辈之间传值(兄弟可以拿到数据)
2.2父组件直接修改子组件中的值
1. 使用this.$children
注意this.$children获取得是一个数据使用的时候应该: this.$children [索引]
* 繁琐 *
2. <组件名 ref='命名'></组件名>code>
this.$refs.命名.xxx = 'yyyyy'
2.3子组件如何修改父组件中的值
可以使用 this.$parent.xxx 获取到父组件中的值并修改
2.4如何找到父组件
this.$parent
2.5如何找到根组件
this.$root
2.6keep-alive
keep-alive是什么: 用来缓存当前组件的
2.7slot/插槽
1.匿名插槽:(没有名字)
子组件
<div>
<div>返回</div>
<slot></slot>
</div>
<组件名> <div style='color:pink'>温馨提示</div></组件名>code>
注意: 匿名插槽中的slot代表的是 组件的包括的所有内容
2.具名插槽(有名字)
子组件
<div>
<slot name="title"></slot>code>
<div>返回</div>
<slot name="text"></slot>code>
</div>
<组件名>
<template #title>
<h2 style="color: pink">标题</h2>code>
</template>
<template #text>
<div style="color: pink">温馨提示</div>code>
</template>
</组件名>
注意: 名字需要在template标签中
3.作用域插槽(传值)
子组件
<div>
<slot name="title"></slot>code>
<div>返回</div>
<slot name="text" :arr='arr'></slot>code>
</div>
data(){
return {
arr:['a','b','c']
}
}
父组件接收
<template #text='{arr}'>code>
<div style="color: pink">温馨提示</div>code>
</template>
注意: 传多个使用,隔开 {arr,list,str}
2.8provide/inject
provide/inject ===> 依赖注入
// 父级组件提供 'foo'
<template>
<div>
<div>{ {foo}}</div>
<son></son>
</div>
</template>
<script>
import Son from "./Son";
export default {
name: "parent",
components: { Son },
provide() {
return {
foo: this.foo
};
},
data() {
return {
foo: {
too:"测试"
},
};
}，
mounted() {
console.log(this.foo)
},
};
</script>
//孙级组件，接收foo
<template>
<div>{ {foo}}</div>
</template>
<script>
export default {
name: "grandSon",
inject: ["foo"],
mounted() {
console.log(this.foo)
},
};
</script>
2.9如何封装组件
组件一定要难点,设计的知识点:slot,组件通信...
三关于VueX
3.1VueX有哪些属性
1.state 全局共享属性存放数据
2.getters 针对数据进行二次修改
3.mutations
4.actions
5.modules
3.2VueX使用state值
1.this.$store.state.xxx
2.辅助函数 mapState
import { mapState } from "vuex";
computed:{
...mapState(['str'])
},
在页面上直接使用str , 在方法中this.str
以上两种都可以拿到state的值, 那么他们的区别是什么
使用this.$store.state.xxx 可以直接修改vueX里面的数据
使用辅助函数的形式是不可以修改的(辅助函数是复制了vuex文件里的内容,所以不能修改)
3.3VueX的getters值的修改
getters是针对于数据进行二次修改的
组件使用了getters中的内容,组件使用v-model的形式会发生什么
getters的值是不能被修改的
3.4VueX的mutations和actions区别
相同点:mutations和actions都是来存放全局方法的
这个全局方法return的值拿不到
区别:
mutations ==>> 同步
actions =>> 返回的诗一个Promise对象,他可以执行相关异步操作
mutations是来修改state的值的,actions的作用是来提交mutations
3.5VueX持久化存储
vuex本身不是持久化存储的数据,vuex是一个状态管理仓库
(state:全局属性)==>>就是存放全局属性的地方
实现持久化存储:
1.自己写localStorage,
2.使用vuex-persistedstate插件(下方插件使用方式)
下载安装插件进行持久化存储
npm install vuex-persistedstate --save
配置
import createPersistedState from 'vuex-persistedstate';
vue.use(Vuex)
// vuex数据持久化配置
plugins:[
createPersistedState({
storage:window.sessionStorage,
key:"store",
render(state){
return {...state}
}
})
]
四.关于路由
4.1路由的模式和区别
1.history
2.hash
区别:
1.关于找不到页面当前页面发送请求的问题
history会给后端发送一次请求
hash不会给后端发送请求
2.关于项目打包前端自测问题
hash 是可以看到内容的
history 默认情况下是看不到内容的
3.关于表象不同
hash: #
history: /
4.2.子路由和动态路由
4.3路由传值
一.vue路由传值有4种方式
接收方式
mounted () {
this.num = this.$route.params.num
}
1.利用router-link路由导航来传递
<router-link to = "/跳转路径/传入的参数"></router-link>
2.调用$router.push实现路由传值 (通过事件触发)
deliverParams (id) {
this.$router.push({path: `/d/${id}`
})
路由配置：{path: '/d/:id', name: D, component: D}
http://localhost:8080/#/d/123
3.通过路由属性中的name来匹配路由,再根据params传递参数值
this.$router.push({
name: 'B',
params: {sometext: '熊出没'}
})
路由配置：{path: '/b', name: 'B', component: B}
http://localhost:8080/#/b
4.通过query来传递参数
this.$router.push({
path: '/c',
query: {sometext: '我是光头强'}
})
路由配置：{path: '/c', name: 'C', component: C}
http://localhost:8080/#/c?sometext=%E8%BF%99%E6%98%AF%E5%B0%8F%E7
4.4导航故障
官网说明
等待导航结果 | Vue RouterVue.js 的官方路由
https://router.vuejs.org/zh/guide/advanced/navigation-failures.html
<code>解决方法:
在跳转的后面加 .catch(error=>error)
4.5$router和$route的区别
CSDN详细使用介绍https://blog.csdn.net/qq_45838276/article/details/126890883?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522172371411616800225554504%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=172371411616800225554504&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-1-126890883-null-null.142^v100^control&utm_term=%24router%E5%92%8C%24route%E7%9A%84%E5%8C%BA%E5%88%AB&spm=1018.2226.3001.4187
https://blog.csdn.net/qq_45838276/article/details/126890883?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522172371411616800225554504%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=172371411616800225554504&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_click~default-1-126890883-null-null.142%5Ev100%5Econtrol&utm_term=%24router%E5%92%8C%24route%E7%9A%84%E5%8C%BA%E5%88%AB&spm=1018.2226.3001.4187
<code>1、$router是用来操作路由，不仅包含路由还包含整个路由的属性和方法
$route是用来获取路由信息,包含当前路由
2. $router是VueRouter的一个实例，他包含了所有的路由，包括路由的跳转方法，
钩子函数等，也包含一些子对象（例如history）
3.route是一个跳转的路由对象（路由信息对象），每一个路由都会有一个$route对象，是一个局部的对象。
4.6.导航守卫
1.全局守卫
beforeEach 路由进入之前
afterEach 路由进入之后
2.路由独享守卫
beforEnter 路由进入之前
3.组件内守卫
beforeRouteEnter 路由进入之前
beforeRouteUpdate 路由更新之前
beforeRouteleave 路由离开之前
五.关于API
5.1$set
碰到数据更新,视图没有更新的问题==>>$set
$set('需要修改的参数','第几个','修改成什么')
this.$set(target,key,'修改后的值')
5.2$nextTick
在vue的生命周期中,beforeCreate或created中如何去获取dom
1.使用异步获取去,定时器
2.使用vue中自带的API$nextTick
$nextTick返回的参数(函数),是一个异步
源码|原理
$nextTick(callback){
return Promise.resolve().then(()=>{
callback();
})
}
5.3$refs
1.this.$refs 获取dome的
使用
<子组件 ref='命名'></子组件>code>
this.$refs.命名 获取到子组件信息
5.4 $el
$el 获取当前组件的根节点
5.5$data
$data 获取当前组件的data数据
5.6$children
$children 获取当前组件的说有子组件的,返回的是一个数组
5.7 $parent
$parent 找到当前组件的父组件,如果找不到返回自身
5.8 $root
$root 找到根组件
5.9data定义数据
在data中定义数据, 在return里面和在return外面定义数据的区别
1.return外: 单纯修改数据是不可以被修改的,因为没有get/set
2.return内: 是可以修改的
5.10 computed计算属性
computed的计算属性的结果值,可以修改吗?
可以的,需要通过get/set写法
当前组件v-model绑定的值是computed来的,那么可以修改吗?可以的,需要通过get/set写法
5.11 watch
深入监听
hello: {
handler(newval, oldval) {
console.log(newval, oldval);
},
immediate:true //立即侦听
}
hello(newhello,oldhello){
console.log(newhello,oldhello);
}
还可以监听路由/路径变化
5.12 methods和computed区别
conputed是有缓存机制的,methods是没有缓存机制的
6.关于指令
6.1如何自定义指令
全局 main.js
Vue.directive('demo',(
insetted:function(a,b,c){
console.log(a,b,c)
}
))
局部:某一个组件内
export default(
directives:{
demo:{
bind:function(el){
console.log(1)
}
}
}
)
6.2vue单项绑定
双向绑定 v-model
单项绑定: v-bind
6.3v-if和v-for优先级
vue2 中 v-for > v-if
vue3 中 v-if > v-for
七.关于原理
7.1.$nextTick原理
$nextTick 获取更新后的dome的
原理
$nextTick(callback){
return Promise.resolve().then(()=>{
callback();
})
}
7.2.双向绑定原理
1.Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，
分别为 obj （要定义其上属性的对象）； prop （要定义或修改的属性）； descriptor （具体的改变方法）
2、简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法。
当给这个属性赋值时，就调用了它里面的set方法；
var obj = {}
Object.defineProperty(obj,'prototypeName',{
get: function() {
console.log("调用了get")
},
set: function(newValue) {
console.log("调用了set,新值是"+newValue)
}
})
obj.prototypeName // 调用了get
obj.prototypeName = 'hello' // 调用了set,新值是hello
一.Vue框架篇
vue2.x生命周期
1.有哪些生命周期
系统自带
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy //销毁
destroyed
2.一旦进入到页面或组件,会执行哪些生命周期,顺序
beforeCreate
created
beforeMount
mounted
3.在哪个阶段有$el(这个组件的根节点),在哪个阶段有$data(data中return数据)
beforeCreate
created $data
beforeMount $data
mounted $el $data
4.如果加入了keep-alive会多两个生命周期
activated , deactivated
5.如果加入了keep-alive第一次或第二次进入会执行哪些生命周期
第一次进入执行5个生命周期
beforeCreate
created
beforeMount
mounted
activated
第二次进入执行1个生命周期
activated
谈谈你对keep-alive的了解
1.是什么
vue系统自带的一个组件,功能:是来缓存组件的. >>提升性能
2.使用场景
就是来缓存组件的,提升项目的性能,具体实现比如,首页进入到详情页,如果用户在首页每次点击都是相同的,
直接缓存就可以了,当然如果点击的不是同一个,那么直接请求
v-if和v-show区别
1.展示形式不同
v-if是 创建一个dome节点
v-show 是把dome节点隐藏起来, display:none block
2.使用场景
初次加载v-if要比v-show好,页不会做加载盒子
频繁切换, v-show要比v-if好,创建和删除开销太大, 隐藏起来比较好
ref是什么
来获取dome的
vue提供获取dome的东西
nextTick是什么
异步获取dome
列:获取最新的dome
scoped原理
样式在本组件中生效
vue组件之间如何传值
1.父组件 传值 子组件
2.子组件 传值 父组件
3.兄弟组件之间传值
使用bus 建立一个中转js,
引入bus.js文件
使用bus.$emit('自定义事件',传值)
兄弟组件使用bus.$on('自定义事件',data=>{
})接收
computed , methods , watch有什么区别
1.computed vs methods有什么区别
computed在dome中使用连续调用只执行一次,有缓存
methods在dome中连续调用,会执行多次,没有缓存
1.computed vs watch有什么区别
watch是监听,数据或者是路由发生了改变才可以响应(执行)
computed计算某一个属性的改变,如果某一个值改变了,计算属性监听到了就会返回
23.vue2和vue3的区别
上一篇： 针对Nacos漏洞猎杀的各种骚姿势
下一篇： nginx 资料整理（四）- web
本文标签
2024年八股文前端高频面试题(js、vue2、vue3、uniapp、es6、echarts、webpack、算法、git、hr交流、技巧现状）
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。