vue高频面试题

146 阅读3分钟

一、生命周期(80%)

1.1、说一下生命周期

beforeCreate();
created();
beforeMount();
mounted();
beforeUpdate();
updated();
beforeDestroy();
destroyed();

1.2、页面(组件)加载会执行哪些生命周期

beforeCreate()(什么都没有);
created()(没有节点,有数据);
beforeMount()(没有节点,有数据,dom就绪中,如果加载网络请求可能会造成阻塞);
mounted()(有节点,有数据)

1.3、生命周期都怎么用,你用哪些?

created():发送网络请求 
mounted():写入插件与DOM相关better-scroll一些插件需要操作dom必须在mounted中使用,
          如果在create中可能会报错,可能是null

二、路由(40%)

2.1 路由传值(显示、隐式)

显示:query:{ key: '电视' } 接收: this.$route.query.key 
隐式:必须加上路由的name params:{ name: '小林'} 接收: this.$route.params.name
***需要加name
  this.$router.push({
      path: '/about',
      name: 'About',
      params: {
          names: '小林'
      }
  })

2.2 路由的模式和区别

a. hash  http://localhost:8080/#/about 
b. history http://localhost:8080/about  

2.3 路由导航守卫(拦截)

to ==> 去哪个路由了 [现在进行时]  
from ==> 之前是哪个路由 [过期]  
next ==> 保安拦截 带路由就跳转到某个路由下 比如 订单管理 如果没有登录就不能进入订单管理
全局
     router.beforeEach((to, from, next) => {})
     router.afterEach((to, from, next) => {})
组件内守卫
     beforeRouteEnter((to, from, next)=> {})
     beforeRouteUpdate((to, from, next)=> {})
     beforeRouteLeave((to, from, next)=> {})

路由独享
    beforeEnter:((to, from, next) =>{}) 

2.4 动态路由和子路由

子路由是方便维护,统一管理路由
动态路由: 名称/:id 
场景: a==>新闻页 b==>多商品详情页

三、keep-alive(40%)

a.是什么:缓存组件 
b.场景:性能优化
c.初次进入时:created > mounted > activated;退出后触发deactivated
  再次进入:会触发activated;事件挂载的方法等,只执行一次的放在mounted中去执行的方法放在activated中

四、ref(40%)

获取dom元素 <h1 ref='xxxxsb'></h1> this.$refs.xxxxsb

五、nextTick(50%)

a.当dom加载完毕执行内部代码
b.场景:在做商品里面有分类(左右列表切换),要用到better-scroll插件

六、axios二次封装(50%)

a. 每次请求数据都会有加载中有数据后就关闭加载中
b. 验证token,如果没有token,就需要push跳转到login(登录页)
总结: 方便,后面使用简单,好维护

七、vuex(60%)

7.1 vuex有哪些属性

 state, getters, mutations, actions, modules

7.2 vuex你在什么情况下用,为什么用vuex

a.管理数据方便,地址,用户,购物车
b.为什么要用modules  当state数据比较多,不好管理,也不知道哪一个属性是在哪个地方用的?

7.3 vuex中mutaions和actions的区别

 a.使用不同:mutaions是可以直接改变state数据的(当然actions也可以),但是actions他的工作是提交    mutations
b.mutaions必须是同步的,actions可以包含任意异步操作
c.actionsmutaions调试更方便

八、computed和methods和watch区别(80%)

a.computed:有缓存,进入组件会执行一次,当值发生变化才会执行
b.methods:template改变,methods内所有方法都会执行
c.watch:是监听数据,当值发生变化才会执行(状态[当前状态和上一次状态])

九、组件传值(80%)

父==>子 props  子==>父  $emit  兄弟 event.bus vuex

十、v-model双向绑定原理(70%)

Object.defineProperty()

十一、v-if和v-show区别(60%)

a.v-if先创建和删除
b.v-show是显示和隐藏(有盒子只不过隐藏)
c.场景:页面当加载的时候v-show的性能不如v-if 频道切换情况v-if不如v-show

十二、mvvm(8%)

m:模块层,methods,data...,通过模块来定义内容,让view层展示出来
v:视图,网页展示出来的内容,把数据展示效果,内容,dom
vm:是vue.js底层逻辑自动实现的,不需要我们操作例如v-model,注意这里v-m

十三、样式穿透(8%)

/deep/

十四、scoped原理(5%)

在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,
它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,
可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化。

十五、v-if和v-for优先级(10%)

a.v-for优先级大于v-if,一般v-if和v-for不会写在同一个标签上,如果写在一起