专高一-Vue面试题

前端

1. vm.$nextTick 是干什么用的？

通过 this.$nextTick 我们可以注册一个回调函数，这个回调函数会在下次 DOM 更新结束之后执行
Vue的数据更新是采用延迟异步更新的，就是说当我们修改了数据之后，页面并不会马上就更新,如果这个时候我们通过DOM操作来获取数据的话，获取的还是之前的旧的数据，这个时候我们就可以使用$nextTick方法。

2.在 Vue 中是如何绑定事件？

在 Vue 中使用 v-on 指令来绑定一个事件，事件可以是 methods 中定义的方法，也可以使用 @ 来进行简写。

3.Vue 组件中的 data 为什么是函数？

Vue 中的 data 是一个对象类型，对象类型的数据是按 引用传值 的。这就会导致所有组件的实例都 共享 同一份数据，这是不对的，我们要的是每个组件实例都是独立的所以为了解决对象类型数据共享的问题，我们需要将 data 定义成一个函数，每个实例需要通过调用函数生成一个独立的数据对象

4.什么是计算属性？和监听器有什么区别？

在 Vue 中使用 computed 来定义计算属性，每个计算属性就是一个函数，这个函数需要有一个返回值。

和监听器的区别：

计算属性主要用途：得到一个经过计算的数据 并且当依赖的数据改变时重新计算，重点在于得到数据
监听器的主要用途：当依赖改变函数时，一个函数重点在干一件事，这件事通常比较复杂，比如：当搜索条件改变时，重新调用后端接口等

5.什么是监听器？和计算属性的区别？

在 Vue 中使用 watch 属性来定义一个监听器函数，当依赖的数据发生变化时触发函数

与计算属性的区别：

计算属性主要用途：得到一个经过计算的数据 并且当依赖的数据改变时重新计算，重点在于得到数据
监听器的主要用途：当依赖改变函数时，一个函数重点在干一件事，这件事通常比较复杂，比如：当搜索条件改变时，重新调用后端接口等

6.什么是过滤器？如何定义过滤器？

过滤器主要用来对数据进行格式的修改

全局过滤器定义

main.js中
Vue.filter('过滤器名字',执行的函数)

局部过滤器定义

任何一个组件中
filters：{
   过滤器名字(){}
}

7.如何属性值绑定？class 和 style 的属性绑定有什么特点？

组件上的属性值都通过 v-bind 来进行绑定

class 和 style 这两个属性在绑定时值有两种形式：

对象：键是类名，值是布尔，含义是当值为真时添加这个键做为类

数组：数组中的每一项都会添加上

8.vue常见的修饰符有哪些？

​ .prevent：阻止默认行为

​ .stop：阻止冒泡

​ .once：事件只触发一次

​ .capture：在捕获阶段触发

​ .self：事件作用在元素本身触发

​ .native：自定义组件中使用，告诉Vue当前触发的是js的原生事件

​ .number 把用户输入的内容，自动转换为数字类型。

​ .trim 过滤输入内容左右空格。

​ .lazy v-model指令默认使用input事件，通过修饰符我们延迟事件为change事件触发。

​ 罗列一下键盘修饰符 .enter .space .ctrl .........

9.v-if 和 v-show 的区别？

共同：v-if 和 v-show 都是控制一个元素是否显示。

区别：v-if 如果是 false 就不渲染这个元素，页面中没有这个元素

​ v-show 无论 true 和 false 都会渲染这个元素，页面中始终有这个元素，

10.style 上的 scoped 是什么意思？

定义在 scoped 的 style 标签中的样式只对当前组件生效，不影响其它组件和子组件。

11.Vue 中的 key 是干什么用的？

用来区分和识别一个元素是否有改变的，有了这个 key 时在后续的排序、修改等更新操作时性能更快。

12.template 组件的用途是？

当我们需要把多个连续的标签做为一个整体进行操作时，我们一般会使用 template 标签来将多个标签套起来统一操作，但最终在渲染时不渲染这个 template 标签

13. 生命周期函数有哪些？

  1.创建
  •   beforeCreate() （比佛可瑞特）创建前的阶段，这个时候data中的数据，还未定义，所以不能使用
      created()（可瑞特的） 最早开始使用 data和methods中数据的钩子函数
   2.挂载
      beforeMount() （比佛芒特）指令已经解析完毕内存中已经生成dom树，还没有渲染到本地
      mounted()（芒特的） dom已经渲染完毕，最早可以操作DOM元素钩子函数
  3.更新
       beforeUpdate() （比佛啊破得特）当data的数据发生改变会执行这个钩子 内存更新，但是DOM节点还未更新
       updated()（啊破得特） 数据更新完成以后触发的方法，DOM节点已经更新
   4.销毁
       beforeDestroy()（比佛迪斯拆）即将销毁 data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作
       destroyed()（迪斯拆的）已经销毁完毕

14 created和mounted的区别

答：created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

15.在 Vue 中使用一个自定义组件的流程是？

自定义组件有两种情况：

• 全局组件：
  
  • 在创建实例之前通过 Vue.component 定义全局组件
  • 在任何一个组件的模板中直接使用
• 局部组件
  
  • 创建一个自定义组件
  • 在组件中使用时需要先使用 import 引入这个自定义组件
  • 引入之后需要在 components 属性中注册这个组件
  • 注册之后就可以在模板中使用

16.父传子组件通信？

（1）在父组件的子组件标签上绑定一个属性，挂载要传输的变量

（2）在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用

17.父传子中props属性验证的数据类型有哪些？

字符串 布尔 数值 数组 对象 函数

18.子传父组件通信的流程？

子传父：主要通过$emit 来实现

具体实现： 子组件通过绑定事件触发函数， 在其中设置this.$emit 中有两个参数一是要派发的自定义事件，第二个参数是要传递的值

19.兄弟组件通信的流程？

兄弟之间传值有两种方法：

• 方法一
  
  • 创建一个空的vue并暴露出去，这个作为公共的bus，即当作两个组件的桥梁
  • 在两个兄弟组件中分别引入刚才创建的bus
  • 在组件A中通过bus.$emit发送数据 - 在组件B中通过bus.$on接收数据
• 方法二 通过vuex实现

20.什么是插槽？插槽有哪些？

插槽是用来向一个组件中传入另一个组件或者一段HTML结构用的

插槽分为三种：

​ 匿名插槽：没有设置名称的插槽，一个组件中只能有一个匿名插槽

​ 有名插槽：通过 name 属性设置了名字的插槽

​ 作用域插槽

21.自定义指令的函数有哪些？

• bind：只调用一次，
• inserted：被绑定元素插入父节点时调用
• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

22. vuex是什么？怎么使用？哪种功能场景使用它？

答：全局状态管理系统，是用来存储数据的一个仓库，用于多个组件共用一个数据

使用：

1：新建了一个目录store.js

2：在main.js引入store.js，并注入到vue实例中。

场景有：

单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

23. vuex五大核心概念

1、state 所有的数据都存储在state中， state是一个对象
2、mutations 可以直接操作state中的数据
3、actions 只能调用mutations的方法
4、getters 类似计算属性实现对state中的数据做一些逻辑性的操作
5、modules 将仓库分模块存储

24. Vuex 页面刷新数据丢失怎么解决？

需要做 vuex 数据持久化，一般使用本地储存的方案来保存数据，可以“%自己设计存储方案，也可以使用第三方插件。
推荐使用 vuex-persist (脯肉赛斯特)插件，它是为 Vuex 持久化储存而生的一个插件。不需要你手动存取 storage，而是直接将状态保存至 cookie 或者 localStorage中。

25.axios 中有几个拦截器？作用是什么？

前置拦截器：就是一个函数，在每次调用接口之前都会触发的函数。

后置拦截器：就是一个函数，每次服务器返回结果之后触发的函数。

前置拦截器：为每次请求添加令牌 后置拦截器：判断每次请求是否失败

-

26.axios如何配置基地址？

有两种方法：

写法一、直接在 axios 上设置 axios.defaults.baseURL

写法二、在创建时使用 baseURL 属性：create

27.路由导航守卫的参数有几种？参数的作用？

三个参数的含义

to：对象，将要跳转到的路由对象。

from：对象，跳转前的路由对象。

next：函数，控制是否跳转

28.keep-alive的作用是什么？

一个路由在切换时会被销毁，之前的数据全部丢失，下次再访问这个组件时，需要重新创建，重新调接口，重新渲染，为了提高性能我们可以使用 keep-alive 把组件缓存起来，这样在组件切换时，这个组件并没有被销毁，下次访问时，就可以显示出来，而且原组件中数据还在。

29.路由导航守卫有几种？

主要分三种：全局守卫、组件内守卫 和 路由独享守卫。

-

30.params和query的区别？

1.用法上

query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name
2.展示上的
query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
3.params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系

31. route和router的区别是什么？

route存储的是属性比如route.query ,route.params

router存储的是方法比如router.push,router.replace,router.go

32. 描述在项目中使用 vue router 的流程？

使用流程：

1. 创建一个对象，通过 path 和 component 属性配置 URL 路径和组件的对应关系。

2. 通过这个配置对象创建路由

3. 页面中添加 router-view 组件显示匹配到的组件

4. 页面中使用 router-link 组件制作路由跳转的按钮

5. 在JS中可以使用 this.$router.push 方法实现路由页面的跳转

33. vue中如何获取dom和组件

在<标签 ref="domName">或<组件名 ref="domName">上加ref属性
js中通过this.$refs.domName