vue面试题

94 阅读2分钟

1.v-show/v-if的区别

v-show本质是中通过css的display属性来进行操作,v-show="false"相当于display:none(隐藏),true则反之.

v-if在编译时相当于三元表达式,v-if="true"这渲染该节点,为false时不渲染该节点. 备注:当需要操作大量DOM时,最好使用v-show.

2.vue中data为什么是function

多次复用该组件时data返回的数据是全新的,当改变其中一个组件的数据时,其他组件的数据不会污染.

3.vue中双向绑定的原理

通过.defined.property()给每一个属性添加getter、setter,当数据发生改变时会自动调用setter,更新数据,重新挂载到页面.

4.vue生命周期,以及vue生命周期都做什么?

beforecreated:初始化实例,这时候还没有进行数据代理,data、methods、watch等等属性和数据均不能使用.

created:初始化实例之后,数据代理执行完毕,可以拿到data、methods、watch等等属性和数据,但是不能和DOM进行交互,如果非要操作DOM,可以通过$nextTick().

备注:一般这个时候可以进行异步请求,优点:减少了页面挂载的时间.

beforemounted:页面挂载之前,生成虚拟DOM.(这里也可以进行异步请求)

mounted:页面挂载之后.

beforeupdated:更新之前,生成新的虚拟DOM和旧的虚拟DOM进行对比,转化成真实DOM元素.

updated:更新完成之后,这里不能更新数据,会造成递归,进入死循环.

beforedestroyed:组件销毁之前,一般会做一些收尾工作,例如:清除定时器,解绑事件等等

destroyed:组件销毁

5.vue中改变数组内索引的值,数据不更新,如何处理

通过数组索引来修改数据,vue监测不到变化,可以通过内置的方法

例如: .push() .shift() .unshift() .pop() .filters()等等,能过够改变原数组的方法就可以使用

6.vuex

共享数据.

state:数据都会存放在这里.

mucation:state里的数据,必须通过mucation,只能操作同步,不可以操作异步,可通过$strore.commit()

action:可以进行异步请求,想要操作state里的数据,必须context.commit('xxx',xx)

getter:类似computed,返回值依赖其他的值.可以搭建快速访问.

7.v-for中key的作用

新旧虚拟DOM对比的时候,会对比key值是否相等,从而提升性能

8.keep-alive的作用和被keep-alive声明的组件的生命周期

作用:缓存组件

激活时会触发:activited

失去激活时:deactivited

9.发送网络请求在哪个函数中

created、beforemounted、mounted都可以进行发送网络请求

10.vue组件间传值有哪些方式

父向子:props

子向父:$emit

兄弟之间的传值:$eventbus

vuex

11.vue什么时候操作DOM比较合适?操作时发现有的组件获取不到,怎么办?

在钩子函数mounted操作比较合适,获取不到时,可以通过$nextTick,等下一次DOM更新完之后调用

----------------------------------------------------------------

vue的内置指令

  1. v-model
  2. v-bind
  3. v-for
  4. v-show
  5. v-html
  6. v-text
  7. v-once
  8. v-on
  9. v-cloak
  10. v-pre

vue 的修饰符有哪些

事件修饰符

  1. .stop
  2. .prevent
  3. .once
  4. .capture
  5. .self
  6. .passive v-model修饰符
  7. .lazy
  8. .number
  9. .trim 键盘事件修饰符
  10. .enter
  11. .detele
  12. .space

路由hash模式和histroy模式

hash模式:地址路径拼接 /#/ 其中#后面的值是hash值 优点:hash值不在出现在http请求中 history模式:地址后缀显示每级路径和参数 优点:常用,美观,整洁 缺点:访问深层页面时,会出现404,一般由后端人员解决路径问题

路由记录动态生成面包屑内容

核心思路:this.$route.matched 来获取路由信息 再通过路由设置的mate路由元 (item.mate.title)

vuex 实现 状态持久化

1.通过调用接口的方式+本地存储 核心思路:通过调用action里的方法发送异步请求,得到返回值之后localstroage.set(),通过context.commit()调用mucation里的方法来修改state里的数据 2.本地化存储 通过localstroage.set('xx',xx) 这里注意要转成JSON格式,以及localstroage.get时(JSON.parse())要再进行解析 3.用插件