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

者 | 红颜祸水nvn

责编 | 唐小引

出品 | CSDN 原力计划

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.csdn.net/qq_34928693/article/details/80539350

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

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

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

https://blog.csdn.net/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 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由、是图标
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过度系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的连接
HTML 5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

vue-router 组件：

< router-link to=""> 路由的路径
< router-link :to="{name:’‘l路由名’}"> 命名路由
< router-view> 路由的显示

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

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

20. MVVM 和其他框架（jQuery）的区别是什么？哪些场景适合？

Vue 是数据驱动，通过数据来显示视图层而不是节点操作。
处理数据交互的时候挺适合 MVVM 设计模式的。

本文为CSDN博主「红颜祸水nvn」的原创文章，CSDN 官方经授权发布。

原文链接：https://blog.csdn.net/qq_43647359/article/details/104774302

欢迎更多的开发者朋友加入 CSDN 原力计划！我们将用全新的方式来释放更多的流量，让优质、有深度、丰富有趣的内容得到精准的流量扶持，同时也帮助创作者和粉丝有更多互动和交流。点击下方图片了解详情。

☞比尔·盖茨退出微软公司董事会；苹果 WWDC、微软 Build 大会均改为线上举办；Rust 1.42.0 发布| 极客头条

☞11 国股市熔断，“祸及”程序员？！

☞2.2版本发布！TensorFlow推出开发者技能证书

☞Soul App 高管被捕，恶意举报导致竞品被下架

☞2020 年最新版 68 道Redis面试题，20000 字干货，赶紧收藏起来备用！

☞最近一个名为 BTCU 的比特币分叉，准备用新分叉解决比特币网络的旧问题

览

我们相信在 Web 的世界里没有一种方案可以解决所有问题。正因如此，Vue 被设计成一个灵活的、可以渐进式集成的框架。根据使用场景的不同需要，相应地有多种不同的方式来使用 Vue，以此在技术栈复杂度、开发体验和性能表现间取得最佳平衡。

独立脚本

Vue 可以以一个单独 JS 文件的形式使用，无需构建步骤！如果你的后端框架已经渲染了大部分的 HTML，或者你的前端逻辑并不复杂，不需要构建步骤，这是最简单的使用 Vue 的方式。在这些场景中你可以将 Vue 看作一个更加声明式的 jQuery 替代品。

Vue 也提供了另一个更适用于此类无构建步骤场景的版本 petite-vue（https://github.com/vuejs/petite-vue）。它为渐进式增强已有的 HTML 作了特别的优化，功能更加精简，十分轻量。

作为 Web Component 嵌入

你可以用 Vue 来构建标准的 Web Component，这些 Web Component 可以嵌入到任何 HTML 页面中，无论它们是如何被渲染的。这个方式让你能够在不需要顾虑最终使用场景的情况下使用 Vue：因为生成的 Web Component 可以嵌入到旧应用、静态 HTML，甚至用其他框架构建的应用中。

单页面应用 (SPA)

一些应用在前端需要具有丰富的交互性、较深的会话和复杂的状态逻辑。构建这类应用的最佳方法是使用这样一种架构：Vue 不仅控制整个页面，还负责处理抓取新数据，并在无需重新加载的前提下处理页面切换。这种类型的应用通常称为单页应用 (Single-Page application，缩写为 SPA)。

Vue 提供了核心功能库和全面的工具链支持，为现代 SPA 提供了极佳的开发体验，覆盖以下方面：

客户端路由
极其快速的构建工具
IDE 支持
浏览器开发工具
TypeScript 支持
测试工具 SPA 一般要求后端提供 API 数据接口，但你也可以将 Vue 和如 Inertia.js （https://inertiajs.com/）之类的解决方案搭配使用，在保留侧重服务端的开发模型的同时获得 SPA 的益处。

全栈 / SSR

纯客户端的 SPA 在首屏加载和 SEO 方面有显著的问题，因为浏览器会收到一个巨大的 HTML 空页面，只有等到 JavaScript 加载完毕才会渲染出内容。

Vue 提供了一系列 API，支持将一个 Vue 应用在服务端渲染成 HTML 字符串。这能让服务器直接返回渲染好的 HTML，让用户在 JavaScript 下载完毕前就看到页面内容。Vue 之后会在客户端对应用进行“激活 (hydrate)”使其重获可交互性。这被称为服务端渲染 (SSR)（https://cn.vuejs.org/guide/scaling-up/ssr.html），它能够极大地改善应用在 Web 核心指标上的性能表现，如最大内容绘制 (LCP)。

Vue 生态中有一些针对此类场景的、基于 Vue 的上层框架，比如 NuxtJS（https://nuxt.com/），能让你用 Vue 和 JavaScript 开发一个全栈应用。

JAMStack / SSG

如果所需的数据是静态的，那么服务端渲染可以提前完成。这意味着我们可以将整个应用预渲染为 HTML，并将其作为静态文件部署。这增强了站点的性能表现，也使部署变得更容易，因为我们无需根据请求动态地渲染页面。Vue 仍可通过激活在客户端提供交互。这一技术通常被称为静态站点生成 (SSG)，也被称为 JAMStack。

SSG 有两种风格：单页和多页。这两种风格都能将站点预渲染为静态 HTML，区别在于：

单页 SSG 在初始页面加载后将其“激活”为 SPA。这需要更多的前期 JS 加载和激活成本，但后续的导航将更快，因为它只需要部分地更新页面内容，而无需重新加载整个页面。
多页 SSG 每次导航都会加载一个新页面。好处是它可以仅需最少的 JS——或者如果页面无需交互则根本不需要 JS！一些多页面 SSG 框架，如 Astro 也支持“部分激活”——它允许你通过 Vue 组件在静态 HTML 中创建交互式的“孤岛”。

单页 SSG 更适合于重交互、深会话的场景，或需要在导航之间持久化元素或状态。否则，多页 SSG 将是更好的选择。

Vue 团队也维护了一个名为 VitePress 的静态站点生成器，你正在阅读的文档就是基于它构建的！VitePress 支持两种形式的 SSG。另外，NuxtJS 也支持 SSG。你甚至可以在同一个 Nuxt 应用中通过不同的路由提供 SSR 和 SSG。

Web 之外...

管 Vue 主要是为构建 Web 应用而设计的，但它绝不仅仅局限于浏览器。你还可以：

配合 Electron 或 Tauri 构建桌面应用
配合 Ionic Vue 构建移动端应用
使用 Quasar 用同一套代码同时开发桌面端和移动端应用
使用 TresJS 构建 3D WebGL 体验
使用 Vue 的自定义渲染 API 来构建自定义渲染器，比如针对终端命令行的！

网传送门：https://www.vuepress.cn
简洁至上：
以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
Vue 驱动：
享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。
高性能：
VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。

使用场景

VuePress可生成出全静态的文档结构，可用于知识库、文档库，甚至写作库的建立；

可根据Vue的基础功能进行扩展，扩展出前后端交互的功能；

有UI开发的筒子们可以自定义主题，创建更加美观的文档库；

下面是以我本地为例进行的操作，相关nodejs、npm环境初始化的工作不是本文展示的重点

基本操作

以下内容来自VuePress官网的快速开始

前提条件
VuePress 需要 Node.js (opens new window) >= 8.6

本文会帮助你从头搭建一个简单的 VuePress 文档。如果你想在一个现有项目中使用 VuePress 管理文档，从步骤 3 开始。

1.创建并进入一个新目录

mkdir vuepress-starter && cd vuepress-starter

2.使用你喜欢的包管理器进行初始化

yarn init # npm init

3.将 VuePress 安装为本地依赖

我们已经不再推荐全局安装 VuePress

yarn add -D vuepress # npm install -D vuepress

注意

如果你的现有项目依赖了 webpack 3.x，我们推荐使用 Yarn (opens new window) 而不是 npm 来安装 VuePress。因为在这种情形下，npm 会生成错误地依赖树。

4.创建你的第一篇文档

mkdir docs && echo '# Hello VuePress' > docs/README.md

5.在 package.json 中添加一些 scripts (opens new window)

这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些 scripts 已经被添加。

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

6.在本地启动服务器

yarn docs:dev # npm run docs:dev

VuePress 会在http://localhost:8080 (opens new window) 启动一个热重载的开发服务器。

现在，你应该已经有了一个简单可用的 VuePress 文档。接下来，了解一下推荐的目录结构和 VuePress 中的基本配置。

更多的操作可以按照官网的说明进行完成。

以下是本地经过初始化设置好的配置，可以帮助你实现初始化，带有导航、侧边栏分组的项目

通用配置

首页配置

---
home: true
heroImage: logo.png
heroText: 系统名称
tagline: 文档中心
actionText: 快速上手 →
actionLink: /guide/
features:
- title: title1
  details: 描述1
- title: title2
  details: 描述2
- title: title3
  details: 描述3
footer: Copyright © 2022-present xxx
---

## 这是内容标题1

内容

---

## 这是内容标题2

内容

---

## 这是内容标题3

内容

config.js模板配置

module.exports = {
    base: "/demodocs/",
    // 主题和它的配置
    title: "Docs",
    // theme: 'antdocs',
    themeConfig: {
      logo: '/logo.png',
      nav: [
        { text: '主页', link: '/' },
        { text: '指导', link: '/guide/' },
        { text: '实例01', link: '/demo01/' },
        {
          text: '其他',
          items: [
            { text: '标题01', link: '/' },
            { text: '百度一下吧', link: 'https://www.baidu.com' },
          ]
        },
        { text: '百度一下', link: 'https://www.baidu.com' },
      ],
      sidebar: {
        '/guide/': [
          {
            title: '指导页面',
            children: [
              '', 'markdown-base','markdown-more'
            ]
          }
        ],
      }
    },
    plugins: ['@vuepress/back-to-top']
  }

界面样式

首页

导航及侧边栏

AntDoc主题设置

yarn add -D vuepress-theme-antdocs

config.js中添加主题配置theme: 'antdocs'

传送门

将上述配置已经上传到gitee上，有需要的筒子们可以clone使用：https://gitee.com/gitsongwz/vuepress-starter-templates.git

你看，奇怪的知识是不是又增加了

在线咨询

上一篇：学习网页制作并不难，HTML菜鸟教程，从这里开始第一课学习
下一篇：java CSS控制图片和文字在同一行显示且对齐的3种方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商