20 道必看的 Vue 面试题 | 原力计划

最新推荐文章于 2025-10-16 13:32:01 发布

原创最新推荐文章于 2025-10-16 13:32:01 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

本文深入探讨Vue.js的关键概念，包括MVVM模式、组件间通信、Vuex状态管理、生命周期钩子、路由管理及优化策略。同时，介绍了Vue与jQuery的区别，以及如何使用axios进行网络请求。

作者 | 红颜祸水nvn

责编 | 唐小引

出品 | 优快云原力计划

1. 什么是 MVVM？

MVVM 是 Model-View-ViewModel 的缩写，MVVM 是一种设计思想。Model 层代表数据模式，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化为 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。

2. 父组件向子组件传值的方法？

父组件传递的数据子组件用 props 方法接收。

子组件通过两种方式接收：可以传递任何类型（数组，对象，各种数据类型等等）

props:[‘title’,‘likes’,‘isPublished’,‘author’]；
props:{title:String,likes:Number}

详细介绍看这篇：Vue 父组件向子组件传值

https://blog.youkuaiyun.com/qq_34928693/article/details/80539350

3. 子组件向父组件传值的方法？

子组件向父组件传值用 this.$emit(key,value) ，父组件接收的时候需要在父组件中创建的子组件的标签中绑定 Key，格式:@Key=“方法名”，父组件声明这个方法，方法带参数，这个参数就是子组件传递的 Value。

详细介绍看这篇：Vue子组件向父组件传值

https://blog.youkuaiyun.com/sisi_chen/article/details/81635216

4. Vuex 是什么？哪种功能场景使用它？

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

当项目庞大的时候使用它：

需要动态的注册响应式数据；
需要命名空间 namespace 来管理组织我们的数据；
希望通过插件，来更改记录；方便测试；以上这些需要和希望，都是我们 vuex 需要做的一些事情。

5. Vuex 有哪几种属性？

state：基本数据
getters：从基本数据派生的数据
mutations：提交更改数据的方法，同步！
actions：像一个装饰器，包裹 mutations，使之可以异步。
modules：模块化 Vuex。

6. 如何让 CSS 旨在当前组件中起作用？

当前组件的 < style>标签修改为< style scoped>

7. 请列举出3个 Vue 中常见的生命周期钩子函数。

beforeCreate：Vue 实例的挂载元素 $el 和数据对象 data 都为未定义，还未初始化。
created：vue 实例的数据对象 data 有值了，$el 没有。
beforeMount：vue 实例的 $el 和 data 都初始化了，但还是虚拟的 dom 节点，具体的 data.filter 还未替换掉。
mounted：vue 实例挂载完成，data.filter 成功渲染
beforeUpdate：data 更新时触发。
updated：data 更新时触发。
beforeDestroy：组件销毁时触发。
destroyed：组件销毁时触发，vue 实例解除了事件监听以及 dom 的绑定（无响应了），但 DOM 节点依旧存在。

8. Vue 生命周期总共有几个阶段？

beforeCreate 创建前
created 创建后
beforeMount 载入前
mounted 载入后
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后

9. 说出至少 4 种 Vue 当中的指令和它的用法？

v-html：渲染文本（能解析 HTML 标签）
v-text：渲染文本（统统解析成文本）
v-bing：绑定数据
v-once：只绑定一次
v-model：绑定模型
v-on：绑定事件
v-if v-shou：条件渲染

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

npm install：下载 node_modules 资源包的命令
npm run dev：启动 vue-cli 开发环境的 npm 命令
npm run build：vue-cli 生成生产环境部署资源的 npm 命令

11. 请说出 vue-cli 工程中每个文件夹和文件的用处。

build 文件夹：存放 webpack 的相关配置以及脚本文件，在实际开发过程中只会偶尔用到 webpack.base.conf.js，配置 less、babel 等。
config 文件夹：常用到此文件夹下的 config.js (index.js) 配置开发环境的端口号，是否开启热加载或者设置生产环境的静态资源相对路径、是否开启 gzip 压缩、npm run build 命令打包生成静态资源的名称和路径等。
node_modules：存放 npm install 命令下载的开发环境和生产环境的各种依赖。
src文件夹：工程项目的源码以及资源、包括页面图片、路由组件、路由配置、vuex、入口文件等。
其他文件：定义的一些项目信息，说明等等。

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

hash 模式：

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

history 模式：

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

13. 如何解决 Vue 中的 ajax 跨域问题？

找到 config 文件夹中的 index.js 文件：

修改 proxyTable: {
    '/api':{    //使用 /api 来代替 "http://localhost:8082"
        target:'http://localhost:8082', //源地址
        changeOrigin:true, //改变源
        pathRewrite:{
            '^/api':'http://localhost:8082' //路径重写
        }
    }
},

修改完之后的跨越请求就可以直接写成 /api/login 等等了。

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

npm run build ：Vue 打包命令
Vue 打包后会在当前工作目录下生成一个 dist 文件夹，文件夹中会有 static 静态文件以及 index.html 初始页面。

15. Vue 如何优化首屏加载速度？

异步路由加载
不打包库文件
关闭 sourcemap
开启 gzip 压缩

16. scss 是什么？

SCSS 是 Sass 3 引入的新语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能，唯一不同之处是 SCSS 需要使用分号和花括号而不是换行和缩进，SCSS 对空白符号不敏感。

17. axios 是什么？怎么使用？

axios 是一个基于 promise 的 HTTP 库，可以发送 get，post 请求，正是由于 Vue、React 的出现，促使了 axios 轻量级库的出现

特定：

可以在浏览器中发送 XMLHttpRequest 请求
可以在 node.js 发送 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应
转换请求数据和响应数据
能够取消请求
自动转化 JSON 格式
客户端支持保护安全免受 XSRF 攻击

如何使用：

npm install --save axios 安装axios
在入口 main.js 中导入 axios

import Axios from 'axios'

Vue.propertype.$axios = Axios;

使用 axios 发送 get 请求

this.$axios.get('/user?stu_id=1002').then(function(resp) {
    console.log(resp);
}).catch(function(err) {
    console.log(err);
});

使用 axios 发送 post 请求 post原生请求在后端是接收不到参数的，所有有两种解决方案，这里只写一种！第二种解决方案是用 QS。

var params = new URLSearchParams();
    params.append('name','孙悟空');
    params.append('age',22);
    let that = this;
    this.$axios.post('http://localhost:8082/user',params).then(function(resp) {
    console.log(resp.data.users);
    that.ausers = data.data.users;
}).catch(function(err) {
    console.log(err);
});

18. vue-router 是什么？它有哪些组件？

vue-router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：