vue常用面试题

涔溪

已于 2024-08-23 10:59:38 修改

阅读量284

点赞数 1

文章标签： vue.js 前端 javascript

于 2021-05-18 15:15:07 首次发布

本文链接：https://blog.csdn.net/fghyibib/article/details/116990443

版权

本文深入探讨Vue面试中常见的知识点，包括Vuex的五个核心概念：state、getters、mutations、actions和modules，以及vue-router的导航守卫和生命周期。还涉及ES6的Set和Map数据结构，以及异步处理方式。同时讲解了axios的使用和Vue组件的生命周期钩子函数。

摘要由CSDN通过智能技术生成

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

Vuex有五个核心概念：

state、getters、mutations、actions、modules。

1、state：vuex的基本数据，用来存储变量

2、geeter：从基本数据(state)派生的数据，相当于state的计算属性

3、mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。

回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数，提交载荷作为第二个参数。

4、action：和mutation的功能大致相同，不同之处在于==》1.Action提交的是mutation，而不是直接变更状态。2.Action可以包含任意异步操作。

5、modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

vuex数据持久化vuex结合localStorage实现状态持久化

vuex-persistedstate 使用浏览器的本地存储（ local storage ）对状态（ state ）进行持久化。这意味着刷新页面或关闭标签页都不会删除你的数据。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择

vue-router

“vue-router通过hash与History interface两种方式实现前端路由，更新视图但不重新请求页面，是前端路由原理的核心之一，是目前在浏览器环境中这一功能的实现主要的两种方式。”

每个钩子方法接收三个参数：

to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

导航守卫

全局守卫

router.beforeEach((to,from,next)=>{})
回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。

全局后置钩子router.afterEach((to,from)=>{})

只有两个参数，to：进入到哪个路由去，from：从哪个路由离开。

组件内的守卫

到达这个组件时，beforeRouteEnter:(to,from,next)=>{}

2.离开这个组件时，beforeRouteLeave:(to,from,next)=>{}

路由独享的守卫

beforeEnter:(to,from,next)=>{}，用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。

**一共*8**个阶段*

Vue生命周期函数 也叫Vue生命周期钩子，就是Vue实例在某一时间点自动执行的函数。

1、beforeCreate（创建前）

2、created（创建后）

3、beforeMount（载入前）

4、mounted（载入后）

5、beforeUpdate（更新前）

6、updated（更新后）

7、beforeDestroy（销毁前）

8、destroyed（销毁后）

activated ：组件激活时调用。该钩子在服务器端渲染期间不被调用。

deactivated ：组件停用时调用。该钩子在服务器端渲染期间不被调用。

errorCaptured : 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

我平时用的比较多的钩了是created和mounted，created用于获取后台数据，mounted用于dom挂载完后做一些dom操作,以及初始化插件等.beforeDestroy用户清除定时器以及解绑事件等,

vue第一次页面加载会触发哪几个钩子函数？

beforeCreate、created、beforeMount、mounted

DOM 渲染在哪个周期中就已经完成？

mounted

Vue有著名的全家桶系列，包含了vue-router，vuex， vue-resource。再加上构建工具vue-cli，sass样式,就是一个完整的vue项目的核心构成。

概括起来就是：

1、项目构建工具

2、路由

3、状态管理

4、http请求工具。

Vue两大核心思想：组件化和数据驱动。组件化：把整体拆分为各个可以复用的个体，数据驱动：通过数据变化直接影响bom展示，避免dom操作。

axios

Axios，基于 Promise 的 HTTP 客户端，可以工作于浏览器中，也可以在 node.js 中使用。

axios是xhr的封装，支持promise操作的请求库，并且提供了一系列方便的api接口。

功能：

从浏览器中创建 XMLHttpRequest
从 node.js 中创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换 JSON 数据
客户端支持防止 XSRF 攻击

async用于声明一个函数是异步的，await用于声明在一个异步函数中等待语句执行完毕。也就是说await只能在async函数中使用

axios请求及响应拦截

request拦截器（请求发送后端之前）

response拦截器（数据返回后，具体页面加载之前）

node.js

“Nodejs是一个基于Chrome V8引擎的JavaScript运行环境，一个让JavaScript运行在服务端的开发平台；它用于方便地搭建响应速度快、易于扩展的网络应用。”

“nodejs的用处：1、它使JavaScript可以运行在服务端。2、Node对一些特殊用例进行优化，提供替代的API。3、可以使用它来开发一些快速移动Web框架。”

ES6 数据结构

set

Set ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。用法：new Set([iterable]) {代码…} Set结构有以下属性： Set.prototype.constructor: 构造函数，默认就是Set函数。 set.prototype.size : 返回Set的成员总数。

Set结构有以下属性：

Set.prototype.constructor: 构造函数，默认就是Set函数。

set.prototype.size : 返回Set的成员总数。

Set结构有以下方法：

add(value)：添加某个值，返回 Set 结构本身。

delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。

has(value)：返回一个布尔值，表示该值是否为Set的成员。

clear()：清除所有成员，没有返回值。