当前位置:首页 » 《随便一记》 » 正文

2024年八股文前端高频面试题(js、vue2、vue3、uniapp、es6、echarts、webpack、算法、git、hr交流、技巧现状)

24 人参与  2024年10月02日 15:20  分类 : 《随便一记》  评论

点击全文阅读


内容较多需要分几部

一.vue2面试题 - 生命周期有哪些?发送请求在created还是mounted?

1.1.生命周期有哪些

vue2.X系统自带有8个beforeCreate  createdbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed

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

beforeCreatecreatedbeforeMountmounted

1.3在created中如何获取dome

只要异写异步代码,获取dom在异步中获取的就可以列定时器方法setTimeout(()=>{    获取dome的方法})vue自带nextTick方法this.$nextTick(res=>{获取dome的方法})

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

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

1.5beforeCreate和created有什么区别

beforeCreate中没有$datacreated中有$datacreated中是可以拿到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个生命周期

beforeCreatecreatedbeforeMountmountedactivated

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

activated如果没加入keep-valive会永远执行beforeCreatecreatedbeforeMountmounted

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='命名'></组件名>      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></组件名>注意:  匿名插槽中的slot代表的是  组件的包括的所有内容2.具名插槽(有名字) 子组件<div>    <slot name="title"></slot>    <div>返回</div>    <slot name="text"></slot></div><组件名>      <template #title>        <h2 style="color: pink">标题</h2>      </template>      <template #text>        <div style="color: pink">温馨提示</div>      </template></组件名>注意:  名字需要在template标签中3.作用域插槽(传值)子组件<div>    <slot name="title"></slot>    <div>返回</div>    <slot name="text" :arr='arr'></slot></div>data(){    return {        arr:['a','b','c']    }}父组件接收 <template #text='{arr}'>     <div style="color: pink">温馨提示</div> </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.actions5.modules   

3.2VueX使用state值

1.this.$store.state.xxx2.辅助函数  mapStateimport { 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.history2.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/1233.通过路由属性中的name来匹配路由,再根据params传递参数值this.$router.push({        name: 'B',        params: {sometext: '熊出没'} })路由配置:{path: '/b', name: 'B', component: B}http://localhost:8080/#/b4.通过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 的官方路由icon-default.png?t=O83Ahttps://router.vuejs.org/zh/guide/advanced/navigation-failures.html        

解决方法:在跳转的后面加  .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.4187icon-default.png?t=O83Ahttps://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、$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中如何去获取dom1.使用异步获取去,定时器2.使用vue中自带的API$nextTick$nextTick返回的参数(函数),是一个异步源码|原理$nextTick(callback){    return Promise.resolve().then(()=>{    callback();    })}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

5.3$refs   

1.this.$refs     获取dome的使用   <子组件 ref='命名'></子组件>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/set2.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-ifvue3 中  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    // 调用了getobj.prototypeName = 'hello'   // 调用了set,新值是hello

一.Vue框架篇

vue2.x生命周期
1.有哪些生命周期系统自带beforeCreate  createdbeforeMountmountedbeforeUpdateupdatedbeforeDestroy  //销毁destroyed2.一旦进入到页面或组件,会执行哪些生命周期,顺序beforeCreate  created        beforeMount       mounted       3.在哪个阶段有$el(这个组件的根节点),在哪个阶段有$data(data中return数据)beforeCreate  created           $databeforeMount       $datamounted       $el $data4.如果加入了keep-alive会多两个生命周期activated   ,   deactivated5.如果加入了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   block2.使用场景初次加载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的区别


点击全文阅读


本文链接:http://zhangshiyu.com/post/167204.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1