Vue高频面试题--面试必备（背）

5、更新前/后：当 data 变化时，会触发 beforeUpdate 和 updated 方法。

6、销毁前/后：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了 事件监听以及和 dom 的绑定，但是 dom 结构依然存在

3、请说出vue.cli项目中src目录每个文件夹和文件的用法？

================================

assets 文件夹是放静态资源；

components 是放组件；

router 是定义路由相关的配置;

view 视图；

app.vue 是一个应用主组件；

main.js 是入口文件

4、怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

===================================

在 router 目录下的 index.js 文件中，对 path 属性加上/:id。 使用 router 对象的 params.id

5、vue-router有哪几种导航钩子？

=====================

1、全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。

2、组件内的钩子；

3、单独路由独享组件

6、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？

===================================

css 的预编译。 使用步骤：

第一步：用 npm 下三个 loader（sass-loader、css-loader、node-sass）

第二步：在 build 目录找到 webpack.base.config.js，在那个 extends 属性中加一个拓展.scss 第三步：还是在同一个文件，配置一个 module 属性

第四步：然后在组件的 style 标签加上 lang 属性 ，例如：lang=”scss” 有哪几大特性:1、可以用变量， 例如（$变量名称=值）；2、可以用混合器；3、可以嵌套

7、mint-ui是什么？怎么使用？说出至少三个组件使用方法？

===============================

基于 vue 的前端组件库。npm 安装，然后 import 样式和 js， vue.use（mintUi）全局引入。 在单个组件局部引入：import{Toast}from‘mint-ui’。  组件一：Toast(‘登录成功’)；  组件二：mint-header；   组件三：mint-swiper

8、请说下封装 vue 组件的过程？

==================

首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项  目开 发：效率低、难维护、复用性等问题。 然后，使用 Vue.extend 方法创建一个组件，然后使用

Vue.component 方法注册组件。子组件需要数据，可以 在 props 中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用 emit 方法

9、vue-loader是什么？使用它的用途有哪些？

==========================

解析.vue 文件的一个加载器，跟 template/js/style 转换成 js 模块。 用途：js 可以写 es6、style 样式可以 scss 或 less、template 可以加 jade 等

10、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？

================================

第一步：在 components 目录新建你的组件文件（smithButton.vue），script 一定要 exportdefault

第二步：在需要用的页面（组件）中导入：

importsmithButtonfrom‘…/components/smithButton.vue’

第三步：注入到 vue 的子组件的 components 属性上面,components:{smithButton} 第四步：在 template 视图 view 中使用，

问题有：smithButton 命名，使用的时候则 smith-button。

11、说下你对mvvm的理解？双向绑定的理解？

=======================

mvvm 就是 vm 框架视图、m 模型就是用来定义驱动的数据、v 经过数据改变后的 html、vm 就是用来实现双 向绑定

双向绑定:一个变了另外一个跟着变了，例如：视图一个绑定了模型的节点有变化，模型对应的值会跟着  变

12、请说下具体使用vue的理解？

=================

1、使用 vue 不必担心布局更改和类名重复导致的 js 重写，因为它是靠数据驱动双向绑定，底层是通过

Object.defineProperty() 定义的数据 set、get 函数原理实现。

2、组件化开发，让项目的可拓展性、移植性更好，代码重用性更高，就好像农民工建房子，拿起自己  的工 具包就可以开工。项目经理坐等收楼就好。

3、单页应用的体验零距离接触安卓原生应用，局部组件更新界面，让用户体验更快速省时。

4、js 的代码无形的规范，团队合作开发代码可阅读性更高。

13、你是怎么认识vuex的？

===============

1、vuex 可以理解为一种开发模式或框架。比如 PHP 有 thinkphp，java 有 spring 等。

2、通过状态（数据源）集中管理驱动组件的变化（好比 spring 的 IOC 容器对 bean 进行集中管理）。

3、应用级的状态集中放在 store 中； 改变状态的方式是提交 mutations，这是个同步的事物； 异步逻辑 应该封装在 action 中。

14、vuex有哪几种属性？

==============

有五种，分别是 State、 Getter、Mutation 、Action、 Module

15、vuex的State特性是？

=================

1、Vuex 就是一个仓库，仓库里面放了很多对象。其中 state 就是数据源存放地，对应于与一般 Vue 对象 里面的 data。

2、state 里面存放的数据是响应式的，Vue 组件从 store 中读取数据，若是 store 中的数据发生改变， 依赖 这个数据的组件也会发生更新。

3、它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性中。

16、vuex的Getter特性是？

==================

1、getters 可以对 State 进行计算操作，它就是 Store 的计算属性 2、 虽然在组件内也可以做计算属性，但是 getters 可以在多组件之间复用

3、 如果一个状态只在一个组件内使用，是可以不用 getters

17、vuex的Mutation特性是？

====================

1、Action 类似于 mutation，不同在于：

2、Action 提交的是 mutation，而不是直接变更状态。

3、Action 可以包含任意异步操作

18、的作用是什么？

==========

包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。

19、vue中ref的作用是什么？

=================

ref 被用来给 DOM 元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普 通的 DOM 元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例 注意：只要想要在 Vue 中直接操作 DOM 元素，就必须用 ref 属性进行注册

20、vue中组件直接的通信是如何实现的？

=====================

组件关系可分为父子组件通信、兄弟组件通信。

1、父组件向子组件： 通过 props 属性来实现

2、子组件向父组件： 子组件用    （ ） 来 触 发 事 件 ， 父 组 件 用on（）来监昕子组件的事件。 父组件可以直接在子组件的自定义标签上使用 v-on 来监昕子组件触发的自定义事件。

3、兄弟之间的通信： 通过实例一个 vue 实例 Bus 作为媒介，要相互通信的兄弟组件之中都引入 Bus， 之后通过分别调用 Bus 事件触发和监听来实现组件之间的通信和参数传递。

21.    vue-cli 工程中常用的 npm 命令有哪些？

================================

npm install：下载 node_modules 资源包的命令

npm run dev：启动 vue-cli 开发环境的 npm 命令

npm run build：vue-cli 生成生产环境部署资源的 npm 命令

22.    vue-router 路由的两种模式。

==========================

hash 模式：

后面的 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新浏览器，每次 hash 值的变化会触发 hashchange 事件。

history 模式：

利用了 HTML5 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的  back、forward、go  的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

23.    Vue 打包命令是什么？Vue 打包后会生成哪些文件？

==================================

npm run build ：Vue 打包命令

Vue 打包后会在当前工作目录下生成一个 dist 文件夹，文件夹中会有 static 静态文件以及

index.html 初始页面。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题资料的朋友点击这里可以免费领取。

[外链图片转存中…(img-eS47Hasc-1713579795373)]