Vue面试题

原创已于 2024-08-23 11:01:31 修改 · 818 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2020-11-14 17:37:18 首次发布

这篇博客详细介绍了Vue的面试常见问题，包括MVVM概念、Vue的优点、组件通信、路由操作、状态管理Vuex的使用以及Vue的生命周期、事件修饰符、优化策略等，深入探讨了Vue开发中的关键技术和最佳实践。

什么是MVVM？

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

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

区别：vue数据驱动，通过数据来显示视图层而不是节点操作。

场景：数据操作比较多的场景，更加便捷

vue的优点是什么？

低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。

可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

组件之间的传值？

父组件与子组件传值

父组件通过标签上面定义传值

子组件通过props方法接受数据

子组件向父组件传递数据

子组件通过$emit方法传递参数

路由之间跳转

声明式（标签跳转）编程式（ js跳转）

vue的路由使用步骤？

1.下载vue-router路由模块；

2.创建路由对象；

3.配置路由规则；

4.将路由对象注册为vue实例对象的成员属性；

vue路由的几种模式：

两种：hash（默认） history 可以用model属性切换路由模式

怎么样定义vue-router的动态路由：

比如 path:中拼接参数， this.$route.params.id 获取；

什么是路由懒加载：

路由懒加载是通过异步的方式来加载对应的路由组件，提高页面相应速度

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

第一步：在components目录新建你的组件文件（indexPage.vue），script一定要export default {}

第二步：在需要用的页面（组件）中导入：import indexPage from ‘@/components/indexPage.vue’

第三步：注入到vue的子组件的components属性上面,components:{indexPage}

第四步：在template视图view中使用，

例如有indexPage命名，使用的时候则index-page

vue如何实现按需加载配合webpack设置

webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入，改为const定义的方式进行引入。

不进行页面按需加载引入方式：import home from ‘…/…/common/home.vue’

进行页面按需加载的引入方式：const home = r => require.ensure( [], () => r (require(’…/…/common/home.vue’)))

vue的生命周期：

beforeCreate: 进行数据和方法的初始化；

created: 已经完成数据和方法的初始化；

beforeMount: 开始渲染dom

mounted:可以渲染dom

beforeUpdate: data中的数据即将被更新；

updated: data中的数据更新完毕；

beforeDestroy: 实例即将销毁；

destroyed:实例已被销毁；

vue双向数据绑定原理：

vue是结合数据劫持和发布订阅者模式来实现双向数据绑定的,当要读取数据的时候会自动触发方法，并且会被赋值

vue中的事件修饰符：

.prevent() 阻止默认事件；

.once() 只执行一次；

.stop() 阻止冒泡；

vue如何优化页面加载：

使用cdn,不要打包一些公共的文件和组件库

vue中有哪些内置组件：

component slot transtion fliters

vue创建组件的时候data中为什么会被return出一个对象？

可以保证组件的每一次调用都是创建一个新对象，组件之间不会产生影响；

什么是vuex？在那种场景下使用？

vuex是全局状态管理工具，它有以下几个核心部分组成：

state:存储数据；

mutations:更新数据的方法；

actions:调用mutations方法，更新state数据；

getters:对state中的数据进行预处理

Vuex相关

（1）vuex是什么？怎么使用？哪种功能场景使用它？

vue框架中状态管理。在main.js引入store，注入。新建一个目录store，…… export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

（2）vuex有哪几种属性？

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

vuex的State特性

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

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

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

vuex的Getter特性

A、getters 可以对State进行计算操作，它就是Store的计算属性

B、虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用

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

vuex的Mutation特性

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。

（3）不用Vuex会带来什么问题？

可维护性会下降，想修改数据要维护三个地方；

可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；

增加耦合，大量的上传派发，会让耦合性大大增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

v-show和v-if指令的共同点和不同点

v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏；

v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果；

使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

你将怎样在模板中渲染原始 HTML？

在模板中输出内容的典型方法是使用 mustache 语法标签从方法、属性或数据变量输出数据。但是 mustache 标记会渲染文本。如果你尝试使用 mustache 标记来渲染 HTML，它将以文本字符串的形式去渲染，并且不会被解析。要将内容渲染和解析为 html，我们可以使用 v-html 指令，如下所示。

什么是vue-loader？

Vue-loader 是 Webpack 的加载器模块，它使我们可以用 .vue 文件格式编写单文件组件。单文件组件文件有三个部分，即模板、脚本和样式。 vue-loader 模块允许 webpack 使用单独的加载器模块（例如 SASS 或 SCSS 加载器）提取和处理每个部分。该设置使我们可以使用 .vue 文件无缝编写程序。

vue-loader 模块还允许把静态资源视为模块依赖性，并允许使用 webpack 加载器进行处理。而且还允许在开发过程中进行热重装。

什么是 mixin？

Mixins 使我们能够为 Vue 组件编写可插拔和可重用的功能。如果你希望在多个组件之间重用一组组件选项，例如生命周期 hook、方法等，则可以将其编写为 mixin，并在组件中简单地引用它。然后将 mixin 的内容合并到组件中。如果你要在 mixin 中定义生命周期 hook，那么它在执行时将优先于组件自己的 hook 。

在开发过程中，如果你的 Vue 程序和后端 API 服务器未在同一主机上运行，该如何代理 API 请求。假设使用 Vue-CLI 3 进行设置？

Let’s say we have a Node.js backend server running on localhost:4040. To ensure it is proxyed in and accessible from the components, we can configure the vue.config.js file and include a devServer section as shown below:

假设我们有一个运行在 localhost:4040 上的 Node.js 后端服务器。为了确保代理并可以从组件中访问它，可以配置 vue.config.js 文件并包含 devServer 部分，如下所示：

在 vue.config.js 文件中：

module.exports: {
 devServer: {
 proxy: {
 '/api': { 
 target: ‘http://localhost:4040/api’, 
 changeOrigin: true 
  }
 }
 }
}

prop 如何指定其类型要求？

通过实现 prop 验证选项，可以为单个 prop 指定类型要求。这对生产没有影响，但是会在开发阶段发出警告，从而帮助开发人员识别传入数据和 prop 的特定类型要求的潜在问题。

配置三个 prop 的例子：

props: {
 accountNumber: {
 type: Number,
 required: true
 },
 name: {
 type: String,
 required: true
 },
 favoriteColors: Array
}

什么是虚拟 DOM？

文档对象模型或 DOM 定义了一个接口，该接口允许 JavaScript 之类的语言访问和操作 HTML 文档。元素由树中的节点表示，并且接口允许我们操纵它们。但是此接口需要付出代价，大量非常频繁的 DOM 操作会使页面速度变慢。

Vue 通过在内存中实现文档结构的虚拟表示来解决此问题，其中虚拟节点（VNode）表示 DOM 树中的节点。当需要操纵时，可以在虚拟 DOM的内存中执行计算和操作，而不是在真实 DOM 上进行操纵。这自然会更快，并且允许虚拟 DOM 算法计算出最优化的方式来更新实际 DOM 结构。

一旦计算出，就将其应用于实际的 DOM 树，这就提高了性能，这就是为什么基于虚拟 DOM 的框架（例如 Vue 和 React）如此突出的原因。

什么是 Vue 插件？

Vue 插件允许开发人员构建全局级别的功能并将其添加到 Vue。用于向程序添加可以全局访问的方法和属性、资源，选项，mixin 以及其他自定义 API。 VueFire 是 Vue 插件的一个例子，该插件添加了 Firebase 特定的方法并将其绑定到整个程序。之后 firebase 函数可在程序结构中的任何位置的 this 上下文中使用。

什么时候调用 “updated” 生命周期 hook ？

在更新响应性数据并重新渲染虚拟 DOM 之后，将调用更新的 hook。它可以用于执行与 DOM 相关的操作，但是（默认情况下）不能保证子组件会被渲染，尽管也可以通过在更新函数中使用 this.$nextTick 来确保。

在 Vue 实例中编写生命周期 hook 或其他 option/propertie 时，为什么不使用箭头函数？

箭头函数自己没有定义 this 上下文，而是绑定到其父函数的上下文中。当你在 Vue 程序中使用箭头函数（=>）时，this 关键字病不会绑定到 Vue 实例，因此会引发错误。所以强烈建议改用标准函数声明。

什么时候使用keep-alive元素？

当由于数据属性或其他某种响应状态而动态切换组件时，每次将它们切换到渲染状态时，都会被重新渲染。尽管你可能需要这种行为，但在某些情况下重新渲染可能是不合适的。例如在创建时从 API 调用中引入数据的组件。你可能不希望每次动态切换这个组件进行渲染时都调用此 API。这时你可以将组件包含在 keep-alive 元素中。keep-alive 元素缓存该组件并从那里获取它，而不是每次都重新渲染它。

在大型 Vue 程序中管理状态的推荐方法是什么？为什么？

当程序在功能和代码方面不断增长时，状态管理会变得困难，并且使用无穷无尽的下游网络 prop 和上游事件当然不是明智的决定。在这种情况下，有必要将状态管理转移到中央管理系统。 Vue 生态系统中提供了 Vuex，它是官方的状态管理库，也是推荐用于集中存储状态的模式。

Vuex 允许维护中央状态。组件将 Vuex 用作响应性数据存储，并在状态更新时进行更新。多个或者不相关的组件可以依赖于相同的中央存储。

在这种情况下，Vue 充当纯 View 层。要修改状态，视图层（例如按钮或交互式组件）需要发出 Vuex Action，然后执行所需的任务。为了更新或修改状态，Vuex 提供了 Mutations。

这个工作流程的目的是留下可用的操作痕迹。

什么是异步组件？

当大型程序使用大量组件时，从服务器上同时加载所有组件可能是没有意义的。在这种情况下，Vue 允许我们在需要时定义从服务器异步加载的组件。在声明或注册组件时，Vue 接受提供 Promise 的工厂函数。然后可以在调用该组件时对其进行“解析”。

通过仅加载基本组件并把异步组件的加载推迟到未来的调用时间，可以节省带宽和程序加载时间。

这是一个异步组件的简单示例。

new Vue({
 components: {
 ‘tweet-box’: () => import(‘./components/async/TweetBox’)
 }
});

当以这种方式使用时，Webpack 的代码拆分将用于提供此功能。