vue2面试题十题

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

vue2面试题十题小结`

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、生命周期

1.1 什么是生命周期函数

所谓的vue⽣命周期就是vue实例从创建到销毁的整个过程我们称之为vue的⽣命周期,
通过vue的⽣命周期我们可以在不同的阶段进⾏不同的逻辑操作

1.2 生命周期函数有哪些

vue⽣命周期常⽤的钩⼦函数⼀共有8个
创建阶段有:

beforeCreate   //实例创建之前 这个时候什么都没有 data methods 都不能用 也没有 this
created   //创建之后 也是最早的可以使用 data 和 methods 的钩子函数 这个时候有 this 了
beforeMount  //组件挂载之前
mounted   //组件挂载之后  这个时候能拿到 dom 节点使用

运行阶段：(更新前后,只要修改了data就会触发)

beforeUpdate   //数据变了 视图还没变
updated    //数据变了 视图也变了

销毁阶段:

beforeDestroy   //组件销毁之前 是最后一个能使用 data 和 methods 的钩子函数
destroyed     //组件销毁之后

除此还有三个
如果用 keep-alive 缓存了组件 就会有 actived deactived 这两个钩子函数
activated 组件激活
deactivated 组件停用
errorCaptured 子组件出错的时候会触发这个钩子函数

1.3 项目开发中 在生命周期里都做过什么功能

我们在写项目时会在 created 或者 mounted 中发送 http 请求
created 和 mounted 的区别 就是 created 比 mounted 执行的时间更早所以会更多的在 created 中请求
mounted 的特点是可以操作 dom 节点
还会用 created 钩子函数 获取 本地存储的数据

1.4 ⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺序是什么?

页面—beforeCreate
页面—created
页面—beforeMount
组件—beforeCreate
组件—created
组件—beforeMount
组件—mounted
页面—mounted

二、vuex 的理解

2.1 vuex的理解

vuex 是 vue 的状态管理工具 管理项目中的公共数据 能够在所有的组件中使用
一共有五大核心：
state 存放公共数据的地方 通过 this.$store.state调用

mutations 修改 state 的地方 只有这里能修改 通过this.$store.commit 调用

getters 相当于是之前的计算属性 通过 this.$store.getters 调用

actions 执行异步操作的地方 通过 this.$store.dispatch 调用

modules 模块化
vuex 缺点就是刷新数据会丢失 我们可以保存本地存储 或者 安装 vuex 持久化插件 vuex-persist 去实现自动本地存储

2.2 vuex 的执行机制

我在项⽬当中如果要改变 state 的状态,我们⼀般是在组件⾥⾯调⽤ this.$store.dispatch ⽅式来触发 actions ⾥⾯的⽅法,在 actions
⾥⾯的⽅法通过 commit 来调⽤ mutations ⾥⾯定义的⽅法来改变 state,同时这也是 vuex 的执⾏机制

三.路由的模式 以及原理 区别

vue的路由模式⼀共有两种,分别是哈希和history. 他们的区别是hash模式不会包含在http请求当中,并且hash不会重新加载⻚⾯,⽽使⽤history模式的话,如果前端的url和后端发起请求的url不⼀致的话,会 报404错误,所以使⽤history模块的话我们需要和后端进⾏配合.

history的原理就是利⽤html5新增的两个特性⽅法,分别是pushState和replaceState来完成的.

四. vue路由守卫

所谓的路由守卫就是当我们进行页面跳转的时候会触发的钩子函数，我们把它称之为vue路由守卫。vue一共给我们提供了三种路由守卫，
第一种全局路由守卫，
beforeEach 路由进入之前
afterEach 路由进入之后

第二种是组件路由守卫，
beforeRouteEnter 路由进入之前
beforeRouteUpdate 路由更新之前
beforeRouteLeave 路由离开之前

第三种是路由独享守卫，
beforeEnter 路由进入之前

它们都有三个参数
to 要进⼊的路由
from 离开之前的路由
next 放行/守卫
next 这个参数 在路由 3.x 版本的时候 是必须的
但是到了路由 4.x 版本的时候 next 参数变成可选的了
一般来说 vue2 搭配 3.x 的路由
vue3 搭配 4.x 的路由

比如说 购物车页面只有登陆的才能访问 我们可以用组件级守卫守卫购物车页面
如果已经登陆存的有 token 的话 就继续访问这个页面 如果没有登陆的话就会跳转到登陆页面

  beforeRouteEnter(to, from, next) {
    if (localStorage.getItem("token")) {
      next();
    } else {
      next("/login");
    }

在项目中我们经常使用路由守卫实现页面的鉴权。比如：当用户登录之后，我们把后台放回的token以及用户的信息保存到vuex和本地，当页面进行跳转的时候，我们会在路由守卫里面获取vuex里面的token。如果token存在的话，我们则使用next让他进入要跳转的页面，如果token不存在的话我们使用next方法让他回到登录页

五. 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-for与v-if的优先级那个⾼?如果同时使⽤v-for和v-if怎么解决?

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

七. methods、computed和watch的区别?

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

八. vue组件通信?

父转子

在⼦组件的标签上定义属性 ⼦组件通过props来进⾏接受,可以通过数组的⽅式进⾏接受,也可以通过对象的⽅式来进⾏接收,如果⽗组件没有传递属性,⼦组件可以default来设置默认值。

⼦传⽗

首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.$emit 去调用这个自定义事件 $emit 方法的第一个参数是自定义事件的名字 第二个参数是就是子组件要传递给父组件的变量 最后在父组件接收使用就可以了

⾮⽗⼦组件通信

通过中央事件总线,我们也称之为eventBus,
在 main.js 中 把一个空的 vue 实例挂载在 vue 的原型上起名叫$bus传数据的时候用this.$bus.$emit传在要接受数据的子组件在created钩子函数中用$on 方法接收

九. $nextTick⽅法有什么作⽤?

$nextTice也叫做异步更新队列方法，而nextTice方法的主要作用就是等待dom元素加载完毕之后才会执行的回调函数，我们经常在nextTice方法里面获取dom元素

十. 说⼀下什么是mvvm模式?

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