vue面试必备,笔记(祝您面试成功,记得收藏)

VIP文章阳小丘

已于 2022-08-10 13:42:32 修改

阅读量678

点赞数 2

分类专栏：理论题文章标签： vue.js es6 前端面试前端框架

于 2022-07-06 11:36:31 首次发布

本文链接：https://blog.csdn.net/qq_61686552/article/details/125636473

版权

一.vue2 部分面试题

1.生命周期函数

1.1 什么是生命周期函数

所谓的 vue ⽣命周期就是 vue 实例从创建到销毁的整个过程我们称之为 vue 的⽣命周期,通过 vue 的⽣命周期我们可以在不同的阶段进⾏不同的逻辑操作. vue ⽣命周期常⽤的钩⼦函数⼀共有 8 个,分别是创建前后、挂载前后、更新前后以及销毁前后. 分别对应的钩⼦函数为 beforeCreate 创建前、 created 创建后、beforeMount 挂载前、mounted 挂载后、beforeUpdate 更新前、updated 更新后、beforeDestory 销毁前、 destoryed 销毁后,

除了以上八个还有三个 activated 激活 deactivated 停用以上两个跟 keep-alive 有关的组件的激活和组件的停用 errorCapture 子组件加载错误时触发

1.2 用的最多的是 created

用它来发送 http 请求还可以获取本地存储里的数据

1.3 created 和 mounted 的区别

created 执行的时机更早 mounted 可以获取到 dom 元素

1.4 如果想在 created 中获取到 dom 元素

使用 nextTick

1.5. 父子组件执行的顺序

父组件 beforeCreate 父组件 created 父组件 beforeMount 子组件 beforeCreate 子组件 created 子组件 beforeMount 子组件 mounted 父组件 mounted

2.nextTick

在 dom 更新之后执行的异步回调在 vue 中 dom 更新是异步如果在 dom 还没更新的时候我们想要拿到 dom 节点来用的时候就要把代码放在 nextTick 中

3.vuex

3.1 什么是 vuex

vue 的状态管理工具管理公共数据放在 vuex 里的数据能够被所有的组件共享

3.2 vuex 的五大核心以及如何调用

state 状态 this.$store.state 调用的时候会通过计算属性computed 把state return出去再用 mutations 方法 this.$store.commit actions 异步操作 this.$store.dispatch getters 相当于是计算属性 this.$store.getters modules 模块化

3.3 vuex 的辅助函数是 vuex 的语法糖

mapState 展开在计算属性里 mapGetters 展开在计算属性里 mapMutation 展开在方法里 mapAction 展开在方法里

用的时候都先 import 引入

import { mapState, mapMutations } from "vuex";

computed: {
    // name() {
    //   return this.$store.state.name;
    // },

    ...mapState(["name", "age"]),
  },
  methods: {
    // change() {
    //   this.$store.commit("change")
    // },
    ...mapMutations(["change"]),
    //调用mutation修改name
  },

3.4 modules 怎么使用

当 vuex 里数据很多的时候我们可以分模块管理数据建立不同的 js 文件作为我们的模块文件每一个模块里都有 state 等其他的四大核心把这个 js 文件引入到 store/index.js 中在 modules 中注册

使用模块里的数据的时候 this.$store.state.xx(模块名字).arr(state 数据名字)

如果使用模块里的 mutations 方法首先在模块里跟 state 同级的地方开启一个命名空间 namespaced:true 使用的时候 this.$store.commit("a(模块名字)/add（模块里方法的名字）")

4.路由的两种模式

⾯试官您好,接下来我给您介绍⼀下 vue 的路由模式,vue 的路由模式⼀共有两种,分别是哈希和 history. 他们的区别是 hash 模式不会包含在 http 请求当中,并且 hash 不会重新加载⻚⾯,⽽使⽤ history 模式的话,如果前端的 url 和后端发起请求的 url 不⼀致的话,会报 404 错误,所以使⽤ history 模块的话我们需要和后端进⾏配合. history 的原理就是利⽤ html5 新增的两个特性⽅法,分别是 pushState 和 replaceState 来完成的. 以上就是我对 vue 路由模式的理解

5.路由的导航守卫

三种 7 个全局 beforeEach 前置守卫 beforeResolve 路由解析守卫 afterEach 后置守卫

组件级守卫 beforeRouteEnter 路由进入之前 beforeRouteUpdate 路由更新之前 beforeRouteLeave 路由离开之前

单个路由独享守卫 beforEnter 路由进入之前

5.1 beforEach 和 beforeResolve 的区别

都是在路由跳转之前执行但是 beforeEach 是在解析路由规则之前执行 beforeResolve 是解析之后路由跳转之前执行 beforeEach 比 beforeResolve 执行的时机更早

5.2 路由守卫的执行顺序

全局前置独享守卫组件守卫解析守卫后置守卫

5.3 要进行是否登陆的守卫

如果守卫所有页面会出现一个死循环的问题再加一层判断如果是登陆页面就 next 不是才跳转 next 组件级守卫有一个问题就是拿不到 this 解决方法是 next 接收一个回调函数这个回调函数的第一个参数 vm 就是组件实例就相当于是 this

6.v-if 与 v-show 的区别

⾯试官您好,接下来我给您介绍⼀下 v-if 和 v-show 的区别? ⾸先 v-if 和 v-show 都是控制元素的显示与隐藏, 不过 v-if 控制元素的显示和隐藏的时候会删除对⽤的 dom 元素,当每⼀个显示的时候,都会重新创建 dom 和渲染. ⽽ v-show 则是通过 css 的 display:none 和 display:block 来控制元素的显示与隐藏. v-if ⽐较耗费性能,所以我们涉及到频繁的显示隐藏操作我们建议使⽤ v-show,如果不是频繁操作的话,我们可以 v-if 在项⽬中我会经常使⽤ v-if 和 v-show,⽐如我们在搜索功能的时候,他有⼀个历史记录,这个时候我们根据是否有搜索的结果来判断历史记录的显示与隐藏,这块我就可以使⽤ v-if ,当然⽤ v-show 也可以. 以上就是我对 v-if 和 v-show 的理解

7.v-for 与 v-if 的优先级那个⾼?如果同时使⽤ v-for 和 v-if 怎么解决?

v-for 的优先级⾼. 因为 v-for 的时候我们才开始渲染 dom 元素,这个 v-if 还⽆法进⾏判断. v-for 和 v-if 不能同时使⽤,我们可以通过标签,⽐如 div 或者 template 标签来进⾏包裹,把 v-if 写到包裹的标签上⾯(写到 v-for 外⾯)

在 vue3 中 v-if 的优先级高

8. methods、computed 和 watch 的区别?

⾸先呢,methods 是⽤来定义⽅法的区域,methods 定义的⽅法需要调⽤才能触发. 不具备缓存⾏⽽ computed 是计算属性,他依赖于属性值的变化,当属性发⽣改变的时候,计算属性⾥⾯定义的⽅法就会触发,computed 具有缓存性,依赖属性值的变化⽽变化. ⽽ watch 主要是⽤于监听,不具备被缓存性.依赖于数据变化⽽触发. 在项⽬中,⽐如我们获取 state 的状态的时候我们会把它放到 computed ⾥⾯,或者在写购物⻋数量计算的时候也会使⽤计算属性. ⽽ watch 也在项⽬经常使⽤,⽐如我们封装编辑和新增弹窗组件的时候会通过 watch 来进⾏ id 判断我们要显否要清空表单的数据. 以上就是我对 computed 和 watch 的理解. watch 有三个属性 deep 深度监听 immediate 进入页面立刻监听 handler 执行函数

我们平常用的就是对 handler 的简写

9. vuex 的运行机制

先在页面中通过 this.$store.dispatch 调用 action 再在 actions 中通过 commit 触发 mutations 方法

10.组件通信

父传子在父组件中定义自定义属性传递变量在子组件中通过 props 接收在接收的时候可以定义为数组也可以定义为对象，定义为对象的话就能设置数据类型和默认值子传父在父组件中通过自定义事件向子组件传传递事件在子组件中通过 this.$emit 调用父组件传来的方法 $emit 的第一个参数就是调用的事件的名字第二个参数就是传的值

兄弟组件在 main.js 中建立中央事件总线并挂载在原型上传数据的时候 this.$bus.$emit 传接数据的时候是在钩子函数 created 中 this.$bus.$on 接收第一个参数是事件名称第二个参数是一个回调函数包含了要接受的数据

vuex

本地存储

v-model 就相当于是 v-on:input 和 v-bind:value 的合写语法糖本质也是组件传值

11. MVVM

MVVM 是把 MVC 的 Controller 和 MVP 的 Presenter 改成了 ViewModel 。 View 的变化会⾃动更新到 ViewModel ， ViewModel 的变化也会⾃动同步到 View 上显示。这种⾃动同步是因为 ViewModel 中的属性实现了观察者模式，当属性变更时都能触发对应的操作

vue 是一个 mvvm 模式的框架 m model 数据模型 v view 视图 vm ViewModel 调度者（控制器）

常见的 mvvm 的框架有哪些 vue 小程序 mvc anguler