2024年八股文前端高频口试题(js、vue2、vue3、uniapp、es6、echarts、webpa ...

内容较多需要分几部
一.vue2口试题 - 生命周期有哪些？发送哀求在created还是mounted？

1.1.生命周期有哪些

1. vue2.X系统自带有8个
2. beforeCreate  
3. created
4. beforeMount
5. mounted
6. beforeUpdate
7. updated
8. beforeDestroy
9. destroyed

复制代码

1.2.进入组件实行哪些生命周期

1. beforeCreate
2. created
3. beforeMount
4. mounted

复制代码

1.3在created中怎样获取dome

1. 只要异写异步代码,获取dom在异步中获取的就可以
2. 列
3. 定时器方法
4. setTimeout(()=>{
5.     获取dome的方法
6. })
8. vue自带nextTick方法
9. this.$nextTick(res=>{
10. 获取dome的方法
11. })

复制代码

1.4为什么发送哀求不在beforeCreate里?

1. 如果请求是在methods封装好的,在beforeCreate掉用的时候是拿不到methods里面的方法的

复制代码

1.5beforeCreate和created有什么区别

1. beforeCreate中没有$data
2. created中有$data
4. created中是可以拿到methods中的方法的

复制代码

 1.6.父组件引入子组件生命周期实行顺序 

父组件引入了子组件,会先实行父组件的前3个生命周期,再实行子组件的4个生命周期

1. 父:beforeCreat、create、beforeMount
2. 子:beforeCreate、create、beforeMount、mounted
3. ...
4. 父:mounted

复制代码

1.7发送哀求在created中mounted?

1. 这个问题需要看具体情况,按照上面的父组件引入子组件的顺序来看,   
2. 如果需要优先加载子组件内容需要再mounted中,如果组件间没有依赖关系,在哪个都可以

复制代码

1.8加入keep-alive组件会实行哪些生命周期

假如使用了keep-alive组件,当前的组件会额外增加两个生命周期(体系8+2)

1. activated     进入到组件   激活时
2. deactivated   销毁时

复制代码

假如加入keep-alive第一次进入会实行5个生命周期

1. beforeCreate
2. created
3. beforeMount
4. mountedactivated

复制代码

1.9第二次或者第N次进入组件会实行哪些生命周期

1. activated假如没加入keep-valive会永远实行beforeCreate
2. created
3. beforeMount
4. mounted

复制代码

2.0你在什么环境下使用过哪些生命周期,说一说生命周期的使用场景

1. created       单组件请求
2. mounted       同步获取dom, 如果子组件先请求父组件再请求
3. activated     判断id是否相同,如果不相同发起请求
4. deactivated   关闭页面记录视频播放时间,初始化的时候从上一记录开始

复制代码

二.关于组件

2.1组件传值(通信)的方式

1. 父传后代 (后代拿到了父的数据)
2. 1.子组件通过props来接受父的传参
3. props:{
4.     str1:{
5.         type:String,
6.         default:''
7.       }
8. }
9. *这种方式父传子方便,但是传孙子背比较困难,并且不能修改父组件中的数据*
11. 2.子组件直接使用父组件中的数据
12. 子组件通过  this.$parent.xxx使用父组件中的数据
13. *子组件可以直接修改父组件中的数据*
14. *缺点:这可能会破坏组件的封装性和可维护性。*
16. 3.依赖注入
17. 优势:父组件可以直接向某个后代组件传递参数,(不需要一级一级的找)

复制代码

1. 后代传父(父拿到了后代的数据)
2. 1.子组件传给父组件
3.      子组件自定义事件  this.$emit('事件名字',传值)
4.      父组件   <组件名 @事件='事件名字'> </组件名>
5.      在methods中使用
7. 2.

复制代码

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

复制代码

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

1. 1.   使用this.$children
2.      注意this.$children获取得是一个数据使用的时候应该:   this.$children [索引]
3.      * 繁琐 *
5. 2.  <组件名 ref='命名'></组件名>
6.       this.$refs.命名.xxx = 'yyyyy'

复制代码

2.3子组件怎样修改父组件中的值

1. 可以使用  this.$parent.xxx  获取到父组件中的值并修改

复制代码

2.4怎样找到父组件

1. this.$parent

复制代码

2.5怎样找到根组件

1. this.$root

复制代码

2.6keep-alive

1. keep-alive是什么:  用来缓存当前组件的

复制代码

2.7slot/插槽

1. 1.匿名插槽:(没有名字)
3. 子组件  
4. <div>
5.     <div>返回</div>
6.     <slot></slot>
7. </div>
8. <组件名> <div style='color:pink'>温馨提示</div></组件名>
9. 注意:  匿名插槽中的slot代表的是  组件的包括的所有内容
14. 2.具名插槽(有名字)
15. 子组件
16. <div>
17.     <slot name="title"></slot>
18.     <div>返回</div>
19.     <slot name="text"></slot>
20. </div>
21. <组件名>
22.       <template #title>
23.         <h2 style="color: pink">标题</h2>
24.       </template>
25.       <template #text>
26.         <div style="color: pink">温馨提示</div>
27.       </template>
28. </组件名>
29. 注意:  名字需要在template标签中
33. 3.作用域插槽(传值)
34. 子组件
35. <div>
36.     <slot name="title"></slot>
37.     <div>返回</div>
38.     <slot name="text" :arr='arr'></slot>
39. </div>
40. data(){
41.     return {
42.         arr:['a','b','c']
43.     }
44. }
45. 父组件接收
46. <template #text='{arr}'>
47.      <div style="color: pink">温馨提示</div>
48. </template>
49. 注意:   传多个使用,隔开  {arr,list,str}

复制代码

2.8provide/inject

1. provide/inject  ===>  依赖注入
4. // 父级组件提供 'foo'
5. <template>
6.   <div>
7.     <div>{{foo}}</div>
8.     <son></son>
9.   </div>
10. </template>
12. <script>
13. import Son from "./Son";
14. export default {
15.   name: "parent",
16.   components: { Son },
17.   provide() {
18.     return {
19.       foo: this.foo
20.     };
21.   },
22.   data() {
23.     return {
24.       foo: {
25.            too:"测试"
26.         },
27.     };
28.   }，
29.   mounted() {
30.     console.log(this.foo)
31.   },
32. };
33. </script>
38. //孙级组件，接收foo
39. <template>
40.   <div>{{foo}}</div>
41. </template>
43. <script>
44. export default {
45.   name: "grandSon",
46.   inject: ["foo"],
47.   mounted() {
48.     console.log(this.foo)
49.   },
50. };
51. </script>

复制代码

2.9怎样封装组件

1. 组件一定要难点,设计的知识点:slot,组件通信...

复制代码

三关于VueX

3.1VueX有哪些属性

1. 1.state 全局共享属性存放数据
2. 2.getters  针对数据进行二次修改
3. 3.mutations
4. 4.actions
5. 5.modules   

复制代码

3.2VueX使用state值

1. 1.this.$store.state.xxx
3. 2.辅助函数  mapState
4. import { mapState } from "vuex";
5. computed:{
6.   ...mapState(['str'])
7. },
8. 在页面上直接使用str   ,  在方法中this.str
11. 以上两种都可以拿到state的值, 那么他们的区别是什么
13. 使用this.$store.state.xxx  可以直接修改vueX里面的数据
14. 使用辅助函数的形式是不可以修改的(辅助函数是复制了vuex文件里的内容,所以不能修改)

复制代码

3.3VueX的getters值的修改

getters是针对于数据进行二次修改的
组件使用了getters中的内容,组件使用v-model的情势会发生什么

1. getters的值是不能被修改的

复制代码

3.4VueX的mutations和actions区别

1. 相同点:mutations和actions都是来存放全局方法的
2. 这个全局方法return的值拿不到
4. 区别:
5. mutations ==>>  同步
6. actions   =>> 返回的诗一个Promise对象,他可以执行相关异步操作
8. mutations是来修改state的值的,actions的作用是来提交mutations

复制代码

3.5VueX长期化存储

1. vuex本身不是持久化存储的数据,vuex是一个状态管理仓库
2. (state:全局属性)==>>就是存放全局属性的地方

复制代码

1.  实现持久化存储:
3. 1.自己写localStorage,
4. 2.使用vuex-persistedstate插件(下方插件使用方式)
6. 下载安装插件进行持久化存储
7. npm install vuex-persistedstate --save
9. 配置
10. import createPersistedState from 'vuex-persistedstate';
11. vue.use(Vuex)
13. // vuex数据持久化配置
14.   plugins:[
15.     createPersistedState({
16.       storage:window.sessionStorage,
17.       key:"store",
18.       render(state){
19.         return {...state}
20.       }
21.     })
22.   ]

复制代码

四.关于路由                

4.1路由的模式和区别

1. 1.history
2. 2.hash

复制代码

1. 区别:
2. 1.关于找不到页面当前页面发送请求的问题
3. history会给后端发送一次请求
4. hash不会给后端发送请求
6. 2.关于项目打包前端自测问题
7. hash 是可以看到内容的
8. history  默认情况下是看不到内容的
10. 3.关于表象不同
11. hash:    #
12. history: /

复制代码

4.2.子路由和动态路由

4.3路由传值

1. 一.vue路由传值有4种方式
3. 接收方式
4. mounted () {
5.   this.num = this.$route.params.num
6. }
9. 1.利用router-link路由导航来传递
10. <router-link to = "/跳转路径/传入的参数"></router-link>
13. 2.调用$router.push实现路由传值  (通过事件触发)
14. deliverParams (id) {
15.   this.$router.push({path: `/d/${id}`
16. })
17. 路由配置：{path: '/d/:id', name: D, component: D}
18. http://localhost:8080/#/d/123
21. 3.通过路由属性中的name来匹配路由,再根据params传递参数值
22. this.$router.push({
23.         name: 'B',
24.         params: {sometext: '熊出没'}
25. })
26. 路由配置：{path: '/b', name: 'B', component: B}
27. http://localhost:8080/#/b
30. 4.通过query来传递参数
31. this.$router.push({
32.         path: '/c',
33.         query: {sometext: '我是光头强'}
34. })
35. 路由配置：{path: '/c', name: 'C', component: C}
36. 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        

1. 解决方法:
2. 在跳转的后面加  .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

1. 1、$router是用来操作路由，不仅包含路由还包含整个路由的属性和方法
2.    $route是用来获取路由信息,包含当前路由
5. 2. $router是VueRouter的一个实例，他包含了所有的路由，包括路由的跳转方法，
6.    钩子函数等，也包含一些子对象（例如history）
8. 3.route是一个跳转的路由对象（路由信息对象），每一个路由都会有一个$route对象，是一个局部的对象。

复制代码

4.6.导航守卫

1. 1.全局守卫
2.   beforeEach  路由进入之前
3.   afterEach   路由进入之后
5. 2.路由独享守卫
6.    beforEnter   路由进入之前
8. 3.组件内守卫
9.   beforeRouteEnter  路由进入之前
10.   beforeRouteUpdate 路由更新之前
11.   beforeRouteleave 路由离开之前

复制代码

五.关于API

5.1$set

1. 碰到数据更新,视图没有更新的问题==>>$set
3. $set('需要修改的参数','第几个','修改成什么')
4. this.$set(target,key,'修改后的值')

复制代码

5.2$nextTick

1. 在vue的生命周期中,beforeCreate或created中如何去获取dom
3. 1.使用异步获取去,定时器
5. 2.使用vue中自带的API$nextTick
6. $nextTick返回的参数(函数),是一个异步
8. 源码|原理
9. $nextTick(callback){
10.     return Promise.resolve().then(()=>{
11.     callback();
12.     })
13. }                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      

复制代码

5.3$refs   

1. 1.this.$refs     获取dome的
2. 使用   
3. <子组件 ref='命名'></子组件>
4. this.$refs.命名       获取到子组件信息

复制代码

5.4 $el

1. $el   获取当前组件的根节点

复制代码

5.5$data

1. $data   获取当前组件的data数据

复制代码

5.6$children

1. $children  获取当前组件的说有子组件的,返回的是一个数组

复制代码

5.7 $parent

1. $parent   找到当前组件的父组件,如果找不到返回自身

复制代码

5.8 $root

1. $root   找到根组件

复制代码

5.9data定义数据

1. 在data中定义数据,   在return里面和在return外面定义数据的区别
3. 1.return外: 单纯修改数据是不可以被修改的,因为没有get/set
4. 2.return内: 是可以修改的

复制代码

5.10 computed计算属性

1. computed的计算属性的结果值,可以修改吗?
3. 可以的,需要通过get/set写法
5. 当前组件v-model绑定的值是computed来的,那么可以修改吗?可以的,需要通过get/set写法

复制代码

5.11 watch

1. 深入监听   
2. hello: {
3.       handler(newval, oldval) {
4.         console.log(newval, oldval);
5.       },
6.       immediate:true  //立即侦听
7. }
9. hello(newhello,oldhello){
10.     console.log(newhello,oldhello);
11. }
13. 还可以监听路由/路径变化

复制代码

5.12 methods和computed区别

1. conputed是有缓存机制的,methods是没有缓存机制的

复制代码

6.关于指令

6.1怎样自定义指令

1. 全局  main.js   
3. Vue.directive('demo',(
4.     insetted:function(a,b,c){
5.         console.log(a,b,c)
6.     }
7. ))
9. 局部:某一个组件内
10. export default(
11.     directives:{
12.         demo:{
13.             bind:function(el){
14.               console.log(1)
15.             }
16.         }
17.     }
18. )

复制代码

6.2vue单项绑定

1. 双向绑定  v-model
3. 单项绑定: v-bind

复制代码

6.3v-if和v-for优先级

1. vue2 中  v-for > v-if
2. vue3 中  v-if  > v-for

复制代码

七.关于原理

7.1.$nextTick原理

1. $nextTick  获取更新后的dome的
3. 原理
4. $nextTick(callback){
5.     return Promise.resolve().then(()=>{
6.     callback();
7.     })
8. }   

复制代码

7.2.双向绑定原理

1. 1.Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，
2. 分别为 obj （要定义其上属性的对象）； prop （要定义或修改的属性）； descriptor （具体的改变方法）
3. 2、简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法。
4. 当给这个属性赋值时，就调用了它里面的set方法；
6. var obj = {}
7. Object.defineProperty(obj,'prototypeName',{
8.         get: function() {
9.                 console.log("调用了get")
10.         },
11.         set: function(newValue) {
12.                 console.log("调用了set,新值是"+newValue)  
13.         }
14. })
16. obj.prototypeName    // 调用了get
17. obj.prototypeName = 'hello'   // 调用了set,新值是hello

复制代码

一.Vue框架篇

vue2.x生命周期

1. 1.有哪些生命周期
2. 系统自带
3. beforeCreate  
4. created
5. beforeMount
6. mounted
7. beforeUpdate
8. updated
9. beforeDestroy  //销毁
10. destroyed
12. 2.一旦进入到页面或组件,会执行哪些生命周期,顺序
13. beforeCreate  
14. created        
15. beforeMount      
16. mounted      
18. 3.在哪个阶段有$el(这个组件的根节点),在哪个阶段有$data(data中return数据)
19. beforeCreate  
20. created           $data
21. beforeMount       $data
22. mounted       $el $data
24. 4.如果加入了keep-alive会多两个生命周期
25. activated   ,   deactivated
27. 5.如果加入了keep-alive第一次或第二次进入会执行哪些生命周期
28. 第一次进入执行5个生命周期
29. beforeCreate  
30. created        
31. beforeMount      
32. mounted   
33. activated
34. 第二次进入执行1个生命周期
35. activated

复制代码

谈谈你对keep-alive的相识

1. 1.是什么
2. vue系统自带的一个组件,功能:是来缓存组件的. >>提升性能
4. 2.使用场景
5. 就是来缓存组件的,提升项目的性能,具体实现比如,首页进入到详情页,如果用户在首页每次点击都是相同的,
6. 直接缓存就可以了,当然如果点击的不是同一个,那么直接请求

复制代码

v-if和v-show区别

1. 1.展示形式不同
2. v-if是 创建一个dome节点
3. v-show 是把dome节点隐藏起来, display:none   block
5. 2.使用场景
6. 初次加载v-if要比v-show好,页不会做加载盒子
7. 频繁切换,  v-show要比v-if好,创建和删除开销太大,  隐藏起来比较好

复制代码

ref是什么

1. 来获取dome的
2. vue提供获取dome的东西

复制代码

nextTick是什么

1. 异步获取dome
2. 列:获取最新的dome

复制代码

scoped原理

1. 样式在本组件中生效

复制代码

vue组件之间怎样传值

1. 1.父组件 传值 子组件
2. 2.子组件 传值 父组件
3. 3.兄弟组件之间传值
4. 使用bus 建立一个中转js,
5. 引入bus.js文件
7. 使用bus.$emit('自定义事件',传值)
8. 兄弟组件使用bus.$on('自定义事件',data=>{
9.    
10.     })接收

复制代码

computed ,  methods , watch有什么区别

1. 1.computed  vs  methods有什么区别
2. computed在dome中使用连续调用只执行一次,有缓存
3. methods在dome中连续调用,会执行多次,没有缓存
6. 1.computed  vs  watch有什么区别
7. watch是监听,数据或者是路由发生了改变才可以响应(执行)
8. computed计算某一个属性的改变,如果某一个值改变了,计算属性监听到了就会返回

复制代码

23.vue2和vue3的区别



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。