带答案的最重要的 Vue.js 面试题

2025 年 3 月 17 日 | 23 分钟阅读

以下是经常被问到的 Vue.js 面试题列表。这些面试题和答案由在顶级跨国公司从事 Vue.js 工作的 JavaScript 专业人士准备。我们希望这份面试题列表对您找到 IT 行业中最好的工作非常有帮助。

1) 什么是 Vue.js？/ 您对 Vue.js 有何理解？

Vue.js 是一个 JavaScript 的渐进式框架，用于创建动态用户界面和单页应用程序。

2) 为什么 Vue.js 被称为渐进式框架？

Vue.js 被称为渐进式框架，因为它正在不断地被修改和开发。

3) 为什么 Vue.js 被认为是未来 Angular 的竞争对手？

Vue.js 也像 Angular 一样用于构建用户界面和单页应用程序。如今，它发展迅速，并且随着时间的推移，出现了新的库和扩展。

许多开发人员社区正在使用 Vue.js，并且这种 JavaScript 语言的受欢迎程度与日俱增。这就是为什么它被认为是 Angular 的潜在竞争对手。

4) 谁是 Vue.js 的创始人/发明者？

Evan You 是 Vue.js 的创始人。他在 Google 从事多个 Angular 项目时创立了 Vue.js。

5) VUE-resource 是什么？如何安装 Vue-Resource？

VUE-resource 是 Vue.js 的一个插件。这个插件与 Vue.js 一起使用，用于进行 Web 请求和处理响应，其中使用 XHMLHttpRequests 或 JSONP。

您可以使用以下 yarn 或 npm 命令安装 VUE-resource

$ yarn add vue-resource
$ npm install vue-resource 

6) 如何在我的项目中安装 Vue.js？

您可以通过以下 4 种方法在项目中安装 Vue.js

您可以通过在 HTML 文件中包含 <script> 标签来使用 CDN。
您可以使用 Node Package Manager (NPM) 安装 Vue.js。
您可以使用 Bower 安装 Vue.js。
您还可以使用 Vue-cli 设置您的项目。

7) 如何创建 Vue.js 的一个实例？

您可以使用 Vue 函数创建一个新的 Vue 实例

var vm = new Vue({
  // options
}) 

当您想启动一个 Vue 应用程序时，您需要创建一个新的 Vue 实例。

8) 使用 Vue.js 有哪些优点？

以下是使用 Vue.js 的优点列表

体积非常小

Vue.js 最大的优点之一是它体积非常小。这个令人兴奋的 JavaScript 插件只有 18-21KB，所以您可以非常轻松地在短时间内下载和使用它。

易于理解和使用

Vue.js 的框架非常容易理解，这也是该框架受欢迎的原因之一。由于其简单的结构，用户可以轻松地将 Vue.js 添加到他们的 Web 项目中并开发应用程序。

易于与现有应用程序集成

Vue.js 框架可以非常轻松地与现有应用程序集成。Vue.js 拥有许多用于各种功能的组件。您可以将其与任何用 JavaScript 编写的应用程序集成。

本质上是灵活的

Vue.js 的灵活本质也使其易于 React.js、Angular.js 和任何其他新的 JavaScript 框架的开发人员理解。它提供了很大的灵活性，可以使用虚拟节点编写 HTML 文件、JavaScript 文件和纯 JavaScript 文件。

组成部分

您可以在 Vue.js 应用程序中创建可重用的自定义元素。

简单且全面的文档

Vue.js 的文档非常简单且全面，因此开发人员只需具备少量 HTML 知识即可开发应用程序或网页。

虚拟 DOM

Vue.js 使用虚拟 DOM，与其他现有框架（如 ReactJS、Ember 等）类似。虚拟 DOM 是原始 HTML DOM 的一种轻量级的内存树表示，它可以在不影响原始 DOM 的情况下进行更新。

双向通信

Vue.js 通过其 MVVM 架构提供双向通信，这使得处理 HTML 块变得非常容易。

9) 列出一些使用 Vue.js 的网站？

以下是使用 Vue.js 在其部分项目和应用程序中的一些网站列表

Grammarly
Netflix
Adobe
Facebook
Laracast
Behance
Gitlab
Euronews
Codeship
Livestorm
Xiaomi
阿里巴巴
Wizzair 等。

10) 单向数据流/单向数据绑定与双向数据绑定有什么区别？

在单向数据绑定或单向数据流中，应用程序的视图（UI）部分不会自动更新。在此模型中，当数据模型发生更改时，您需要编写一些自定义代码以在每次更改后使其更新。v-bind 指令 用于 Vue.js 中的单向数据流或绑定。

另一方面，在双向数据绑定中，当数据模型发生更改时，应用程序的视图（UI）部分会自动更新。v-model 指令 用于 Vue.js 中的双向数据绑定。

11) 如何在 Vue.js 中创建双向绑定？

v-model 指令 用于在 Vue js 中创建双向绑定。在双向绑定中，数据或模型与 DOM 绑定，DOM 再绑定回模型。

让我们看一个示例来演示如何实现双向绑定。

<div id="app">
  {{message}}
  <input v-model="message">
</div>
<script type="text/javascript">
  var message = 'Vue.js is rad';
  new Vue({ el: '#app', data: { message } });
</script> 

12) 您对 Vue.js 中的组件 props 有何理解？

在 Vue.js 中，每个组件实例都有自己的独立作用域。因此，您无法在子组件的模板中直接引用父组件的数据。

Props 用于将数据向下传递给子组件。Props 是自定义属性。您可以在组件上注册。当值为 prop 属性传递时，它就成为该组件实例上的一个属性。

Vue.component('blog-post', {
  // camelCase in JavaScript
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

13) Vue.js 中 Mixins 的要求是什么？

Vue.js 中的 Mixins 是一组以特定方式存储的定义逻辑。Mixins 可以反复重用，为您的 Vue 实例和组件添加功能。Mixins 很重要，因为它们提供了很多功能。以下是 Mixins 提供的功能列表

Mixins 帮助您轻松遵循 DRY 原则，并确保您不会重复自己。
Mixins 提供了极大的灵活性。
Mixin 包含 Vue 组件的选项。
您可以安全地在 Vue.js 中使用 Mixins，因为它们不会影响其定义作用域之外的更改。
Vue.js 中的 Mixins 为代码重用提供了绝佳的平台。

14) Vuex 是什么？

VueX 是 Vue.js 应用程序的状态管理模式和库。它被用作 Vue.js 应用程序中所有不同组件的集中式存储。Vuex 提供了一些规则，以确保状态只能以可预测的方式进行突变。通过将 Vuex 与 Vue.js 的官方开发者工具扩展集成，您可以获得许多附加功能。

15) Vue.js 中的过滤器是什么？

Filters 是 Vue.js 组件提供的一种功能，允许您对动态模板数据应用格式化和转换。Filters 在两个地方使用：胡子插值和 v-bind 表达式。Filters 不会改变组件数据或任何东西，它们只影响输出。

16) Vue.js 中过滤器的主要用途是什么？

以下是 Vue.js 中过滤器的主要用途列表

Filters 主要用于在 DOM 级别过滤数据，为您提供仍然完好存储在存储器中但以自定义指定方式表示的数据。
Filters 用于增强视图层的表示。
Filters 也是可重用的。
您可以全局声明一个过滤器，并在任何期望的组件中使用它。
Filters 帮助您在视图级别格式化数据。

17) 可以从 Vue.js 调用 Rest API 吗？如何调用？

是的，我们可以从 Vue.js 调用 Rest API。有几种 HTTP 库可用于从 Vue.js 调用 REST API。其中一个流行的库是 Axios。它非常易于使用且轻量级。您可以使用以下命令将其包含在您的项目中。

npm install axios --save
Implementing GET method using Axios in Vue JS
axios({ method: "GET", "URL": "https://httpbin.org/ip" }).then(result => {
                this.ip = result.data.origin;
            }, error => {
                console.error(error);
            });

18) 如何部署 Vue.js 应用程序？

您可以使用以下命令创建一个项目

要运行您的项目，请运行以下命令

执行上述命令后，将 index.html 和 /dist/ 文件夹复制到您的网站根目录，您的项目即可部署。

19) Vue.js 中的 Vue-loader 是什么？

Vue-loader 是 Vue.js 中 webpack 的一个 loader 模块，用于使用 .vue 文件格式编写单文件组件。

单文件组件包含模板、脚本和样式三个部分。webpack 可以使用单独的 loader 模块（如 SASS 或 SCSS loader）提取和处理每个部分。vue-loader 模块使静态资源被视为模块依赖，并支持使用 webpack loader 进行处理。

20) 如何在 Vue.js 中处理事件？

请看以下示例，它演示了如何在 Vue.js 中处理事件

HTML 代码

<div id="app">
  Name: <input type="text" v-model="name">
  <button v-on:click="myClickHandler">Say Hello button>
div> 

JS 代码

var myViewModel = new Vue({
  el: '#app',
  data: my Model,
  // A click handler inside methods
  methods: {
    ClickHandler: function(e) {
      alert("Hello " + this.name);
    }
  }
 });

21) Vue.js 中最常用的指令是什么？/ 您对条件指令有何理解？

Vue.js 中有一组指令，用于根据条件显示或隐藏元素。这些指令也称为条件指令。

v-if
v-else
v-else-if
v-show
v-model
v-on

v-if 指令： v-if 指令用于根据给定表达式添加或删除 DOM 元素。例如，如果将 isLoggedIn 设置为 false，则下面的按钮将不会显示。

v-if 指令还允许您通过将所有元素包装在具有条件的 <template> 元素中，用单个 v-if 语句控制多个元素。例如，您可以有条件地同时应用标签和按钮。

<template v-if="isLoggedIn">
  <label> Logout </button>
  <button> Logout </button>
</template>

v-else 指令： v-else 指令用于仅当相邻 v-if 的表达式设置为 false 时显示内容。这与任何编程语言中的 else 块相同，用于显示替代内容，并且它前面有一个 v-if 或 v-else-if 块。您无需为此传递任何值。例如，v-else 用于在 isLoggedIn 设置为 false（未登录）时显示登录按钮。

<button v-if="isLoggedIn"> Logout </button>
<button v-else> Log In </button>

v-else-if 指令： 当您需要检查两个以上的选项时，使用 v-else-if 指令。例如，如果您想在 ifLoginDisabled 属性设置为 true 时显示一些文本而不是登录按钮，则可以通过 v-else 语句实现。

<button v-if="isLoggedIn"> Logout </button>
<label v-else-if="isLoginDisabled"> User login disabled </label>
<button v-else> Log In </button>

v-show 指令： v-show 指令类似于 v-if，但它会将所有元素渲染到 DOM，然后使用 CSS display 属性来显示/隐藏元素。如果您希望元素频繁地开启和关闭，则首选此指令。

22) v-show 和 v-if 指令有什么区别？

v-show 和 v-if 指令之间最常见的区别如下

索引	v-show 指令	v-if 指令
1.	v-if 指令仅当表达式通过时才用于将元素渲染到 DOM。	v-show 指令用于将所有元素渲染到 DOM，然后根据表达式使用 CSS display 属性来显示/隐藏元素。
2.	v-if 指令也支持 v-else 和 v-else-if 指令。	v-show 指令不支持 v-else 和 v-else-if 指令。
3.	v-if 指令具有较高的切换成本，因为它每次都会添加或删除 DOM。	v-show 指令具有较高的初始渲染成本。
4.	v-if 指令在初始渲染时间方面具有优势。	如果您需要频繁地切换元素的开启和关闭，v-show 指令具有性能优势。
5.	v-if 指令支持 tab。	v-show 指令不支持 tab。

23) Vue.js 中的 key 是什么？

为了更有效地渲染 DOM 元素，Vue.js 会重用元素而不是每次都创建新元素。key 是一种标志，它告诉 Vue“如果与此子组件关联的数据被移动到其他地方，则将组件一起移动以保留已存在更改”。

24) 为什么建议不要在 Vue.js 中将 v-if 和 v-for 指令一起用于同一个元素？

建议不要在同一个元素上同时使用 v-if 和 v-for 指令，因为 v-for 指令比 v-if 指令具有更高的优先级。如果您同时使用这两个指令，那么有两种常见的情况可能会让您感到诱惑

当您需要过滤列表中的项时（例如 v-for="user in users" v-if="user.isActive"）。在这些情况下，请将 users 替换为一个返回过滤后列表的新计算属性（例如 activeUsers）。
如果要隐藏列表时不渲染它（例如 v-for="user in users" v-if="shouldShowUsers"）。在这些情况下，请将 v-if 移动到容器元素（例如 ul、ol）。

25) Vue.js 中使用了多少种类型的指令？

Vue.js 中使用了以下类型的指令

通用指令
字面量指令
空指令
自定义指令

26) Vue.js 中的数组检测变异方法有哪些？

顾名思义，Vue.js 中的数组检测变异方法用于修改原始数组。以下是触发视图更新的数组变异方法列表

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

当您对列表执行上述任何变异方法时，它将触发视图更新。

27) Vue.js 中的数组检测非变异方法有哪些？

Vue.js 中的数组检测非变异方法是不变异原始数组但始终返回新数组的方法。

以下是非变异方法列表

filter()
concat()
slice()

例如，让我们看一个待办事项列表，它根据状态过滤器用新数组替换旧数组

vm.todos = vm.todos.filter(function (todo) {
  return todo.status.match(/Completed/)
})

28) Vue.js 提供了哪些不同的事件修饰符？

通常，JavaScript 在事件处理程序中提供 event.preventDefault() 或 event.stopPropagation()。我们可以使用 Vue.js 方法，但这些方法用于数据逻辑，而不是处理 DOM 事件。

Vue.js 为 v-on 提供了以下事件修饰符，这些修饰符是指令后缀，用点符号表示。

.stop
.prevent
.capture
.self
.once
.passive

请看以下 stop 修饰符的示例

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="methodCall"></a>

链式修饰符的示例如下

<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>

29) 给出一个示例来演示如何使用事件处理程序？

Vue.js 中的事件处理程序与纯 JavaScript 类似。方法调用也支持特殊的 $event 变量。

示例

<button v-on:click="show('Welcome to VueJS world', $event)">
  Submit
</button>
methods: {
  show: function (message, event) {
    // now we have access to the native event
    if (event) event.preventDefault()
    console.log(message);
  }
} 

30) 给出一个示例来演示如何在 Vue.js 中定义自定义键修饰符别名？

我们可以通过全局配置 keyCodes 定义自定义键修饰符别名。以下是有关属性的一些指南

我们不能使用 camelCase。相反，我们应该使用带双引号的 kebab-case。
我们可以将多个值定义为数组格式。

请看示例

Vue.config.keyCodes = {
  f1: 112,
  "media-play-pause": 179,
  down: [40, 87]
}

注意：keyCode 事件的使用已被弃用，新浏览器不再支持它。

31) Vue.js 中支持哪些系统修饰键？

Vue.js 支持以下修饰符，可以在我们按下相应键时触发鼠标或键盘事件监听器。支持的系统修饰键列表是

.ctrl
.alt
.shift
.meta

请看以下带有 click 事件的 control 修饰符示例。

示例

<!-- Ctrl + Click -->
<div @click.ctrl="doAction">Do some action here</div>

32) Vue.js 中本地注册的要求是什么？

在 Vue.js 中，当全局注册似乎不理想时，需要进行本地注册。例如，假设您正在使用 Webpack 等构建系统并全局注册所有组件。在这种情况下，即使我们停止使用某个组件，它仍可能包含在您的最终构建中。这不必要地增加了用户需要下载的 JavaScript 量。在这些情况下，最好将您的组件定义为普通 JavaScript 对象，如下所示

var ComponentA = {/*.......*/} 
var ComponentB = {/*.......*/} 
var ComponentC = {/*.......*/}

然后，在 components 选项中定义您想使用的组件，如下所示

new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentA
}
})

33) Vue.js 中支持哪些鼠标按钮修饰符？

Vue.js 支持以下鼠标按钮修饰符

.left
.right
.middle

示例

.right 修饰符的用法如下

 <button 
   v-if="button === 'right'"
   v-on:mousedown.right="increment"
   v-on:mousedown.left="decrement"
 />

34) v-model 指令在 Vue.js 中支持哪些修饰符？

以下是 Vue.js 中 v-model 指令支持的三个修饰符

lazy： 默认情况下，v-model 指令在每次 input 事件后同步输入与数据。我们可以添加 lazy 修饰符来改在 change 事件后同步。

<!-- synced after "change" instead of "input" -->
<input v-model.lazy="msg" > 

number： 当我们希望用户输入自动转换为数字类型时，使用 number 修饰符处理我们的 v-model。使用 type="number" 时，HTML input 元素的 value 始终返回一个字符串。这就是为什么需要这种类型转换修饰符。

trim： 当我们希望自动修剪用户输入的空格时，应将 trim 修饰符添加到我们的 v-model。

35) 组件何时需要单个根元素？

在 Vue.js 2.x 版本中，当模板包含多个元素时，每个组件必须有一个单一的根元素。在这种情况下，您需要将元素包装在一个父元素中。

<template>
   <div class="todo-item">
       <h2>{{ title }}</h2>
       <div v-html="content"></div>
   </div>
</template>

否则，它将显示一个错误，提示“组件模板应只包含一个根元素”。

Vue.js 3.x 版本允许组件现在拥有多个根节点。这种添加多个根节点的方式称为 fragments。

<template>
     <h2>{{ title }}</h2>
     <div v-html="content"></div>
</template>

36) 您对 Vue.js 中组件的全局注册有何理解？

Vue.js 中组件的全局注册允许我们在注册后创建的任何根 Vue 实例（new Vue）的模板中使用它。

在全局注册中，使用 Vue.component 创建的组件如下

Vue.component('my-component-name', {
  // ... options ...
})

我们可以获取多个在 vue 实例中全局注册的组件，

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })

上述组件可以在 vue 实例中使用如下

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

注意：组件也可以在子组件中使用。

37) 使用 Vue.js 中的 v-for 指令的目的是什么？

在 Vue.js 中，使用 v-for 指令是因为它允许我们遍历数组或对象中的项。通过使用此指令，我们可以迭代数组或对象中的每个元素。

数组中使用 v-for 指令的示例

<ul id="list">
  <li v-for="(item, index) in items">
    {{ index }} - {{ item.message }}
  </li>
</ul>
var vm = new Vue({
  el: '#list',
  data: {
    items: [
      { message: 'Alex' },
      { message: 'Muler' }
    ]
  }
})

我们也可以使用分隔符而不是 in，这类似于 JavaScript 迭代器。

对象中使用 v-for 指令的示例

<div id="object">
  <div v-for="(value, key, index) of user">
    {{ index }}. {{ key }}: {{ value }}
  </div>
</div>
var vm = new Vue({
  el: '#object',
  data: {
    user: {
      firstName: 'Alex',
      lastName: 'Muller',
      age: 30
    }
  }
})

38) 给出一个示例来演示如何使用 key 属性重用元素？

Vue.js 始终致力于尽可能有效地渲染元素。因此，可以重用元素而不是从头开始构建它们。但这在某些情况下会产生问题。例如，如果您尝试在 v-if 和 v-else 块中渲染同一个 input 元素，它会保留前一个值，如下所示

<template v-if="loginType === 'Admin'">
  <label>Admin</label>
  <input placeholder="Enter your ID">
</template>
<template v-else>
  <label>Guest</label>
  <input placeholder="Enter your name">
</template>

在上述情况下，我们不应重用它。最好通过应用 key 属性使两个 input 元素独立，如下所示

    <template v-if="loginType === 'Admin'">
      <label>Admin</label>
      <input placeholder="Enter your ID" key="admin-id">
    </template>
    <template v-else>
      <label>Guest</label>
      <input placeholder="Enter your name" key="user-name">
    </template>

在上面的例子中，两个输入是独立的，并且不相互影响。

39) 为什么建议为指令使用 key 属性？

建议为指令使用 key 属性来跟踪每个节点的身份，从而重用和重新排序现有元素。我们必须为 v-for 迭代中的每个项提供一个唯一的 key 属性。key 的理想值是每个项的唯一 id。

示例

<div v-for="item in items" :key="item.id">
  {{item.name}}
</div>

因此，除非迭代的 DOM 内容很简单，否则在可能的情况下，始终建议为 v-for 提供一个 key。

注意：我们应该使用字符串或数字值而不是非原始值（如对象和数组）。

40) 您对数组检测非变异方法有何理解？

不变异原始数组但始终返回新数组的方法称为非变异方法。

以下是非变异方法列表

filter() 方法
concat() 方法
slice() 方法

让我们举一个例子来更好地理解它。我们有一个待办事项列表，根据状态过滤器用新数组替换旧数组。

示例

vm.todos = vm.todos.filter(function (todo) {
  return todo.status.match(/Completed/)
})

由于 Vue.js 的实现，这种方法不会重新渲染整个列表。

41) 如何在 Vue.js 中重定向到另一页？

在 Vue.js 中，如果您使用 vue-router，您应该使用 router.go(path) 导航到任何特定路由。您可以使用 this.$router 从组件内部访问路由器。router.go() 在 Vue.js 2.0 中已更改。您现在可以使用 router.push({ name: "yourroutename"}) 或仅 router.push("yourroutename") 进行重定向。

42) 您对 Vue.js 中的 slots 有何理解？

在 Vue.js 中，<slot> 元素用作内容的分配出口。

让我们以创建一个带有插槽以插入内容的警报组件为例。

示例

在 Vue.js 中，<slot> 元素用作内容的分配出口。

让我们以创建一个带有插槽以插入内容的警报组件为例。

示例

Vue.component('alert', {
  template: `
    <div class="alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>`
})

我们可以插入动态内容，如下所示

<alert>
  There is an issue with in application.
</alert>

43) 单文件组件在 Vue.js 中解决了哪些问题？

在 Vue.js 中，单文件组件用于解决具有 .vue 扩展名的 JavaScript 驱动的应用程序中的常见问题。

以下是 Vue.js 中单文件组件解决的问题列表

全局定义为每个组件指定唯一名称。
字符串模板缺乏语法高亮，并且需要丑陋的反斜杠来进行多行 HTML。
无 CSS 支持。这意味着虽然 HTML 和 JavaScript 被模块化为组件，但 CSS 明显被排除在外。
没有构建步骤限制为 HTML 和 ES5 JavaScript，而不是 Pug 和 Babel 等预处理器。

44) 创建过滤器的不同方法有哪些？

有两种定义过滤器的方法

局部过滤器：您可以在组件的选项中定义局部过滤器。在这种情况下，过滤器适用于该特定组件。

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

全局过滤器：您也可以在创建 Vue 实例之前全局定义一个过滤器。在这种情况下，过滤器适用于 Vue 实例中的所有组件，

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
  // ...
})

45) 您对 mapState 助手（helper）有何理解？

在 Vuex 应用程序中，每次我们想访问 store 的状态属性或 getter 时都创建一个计算属性会非常重复、困难且乏味，尤其是当一个组件需要多个状态属性时。在这种情况下，我们可以使用 vuex 的 mapState 助手，它为我们生成计算 getter 函数。

在下面的 increment 示例中，我们演示了 mapState 助手

// in full builds helpers are exposed as Vuex.mapState
import { mapState } from 'vuex'
export default {
  // ...
  computed: mapState({
    // arrow functions can make the code very succinct!
    username: state => state.username,
    // passing the string value 'username' is same as `state => state.username`
    usernameAlias: 'username',
    // to access local state with `this`, a normal function must be used
     greeting (state) {
      return this.localTitle + state.username
    }
  })
}

当映射的计算属性的名称与状态子树的名称相同时，您也可以将字符串数组传递给 mapState

computed: mapState([
  // map this.username to store.state.username
  'username'
])

46) stylelint 最显著的特点是什么？

以下是 stylelint 最显著的特点列表

stylelint 拥有超过 160 条内置规则，可捕获错误、应用限制和强制执行样式约定。
它能够理解最新的 CSS 语法，包括自定义属性和 4 级选择器。
它能从 HTML、markdown 和 CSS-in-JS 对象及模板文字中提取嵌入式样式。
它也用于解析 CSS 类语法的语言，如 SCSS、Sass、Less 和 SugarSS。
它支持重用社区插件和创建自己的插件。

47) Vue.js 中的单文件组件是什么？

在 Vue.js 中，单文件组件是一个扩展名为 .vue 的文件，其中包含一个 Vue 组件。单文件组件包含组件的模板、逻辑和样式，所有这些都捆绑在一个文件中。它还包含一个 <script> 块，可选的 <template> 和 <style> 块，以及可能的其他自定义块。

48) 如何在 Vue.js 中使用单文件组件？

要在 Vue.js 中使用单文件组件，我们必须设置 Vue Loader 来解析文件（这是 webpack 构建管道的一部分自动完成的）。它还支持非默认语言，如 Sass 或 HTML 模板语言，并支持可插入的预处理器。

49) Vue.js 中的 $parent 属性是什么？

在 Vue.js 中，$parent 属性用于从子组件访问父实例。它类似于 $root 属性。$parent 属性提供直接访问，但它使应用程序难以测试和调试。在此属性中，很难找出突变来自何处。

50) Vue.js 中的 $child 属性是什么？

在 Vue.js 中，$child 属性与 $parent 属性类似，但它用于访问子实例。

51) ref 在 Vue.js 中的用途是什么？

ref 是一个用于直接访问组件的属性。尽管有 props 和 events，但如果您想直接访问子组件，可以使用 ref 属性为子组件分配一个引用 ID。

示例

现在您可以使用 this.$refs.usernameInput，其中我们必须在组件中定义此 ref。

您应该避免在模板或计算属性中访问 $refs，因为 $refs 仅在组件渲染后填充，并且它们不是响应式的。

52) Vue.js 应用中内存泄漏最常见的原因是什么，以及如何解决？

在 Vue.js 应用程序中，内存泄漏通常源于使用创建自己的实例和/或操纵 DOM 的第三方库。v-if 指令和 Vue Router 会销毁 Vue 组件实例。要克服这个问题，请在组件被销毁之前执行清理操作。这应该在 beforeDestroy() 生命周期钩子中手动完成。

例如，假设我们的组件中有一个名为 PowerGraph.js 的虚构库。它创建一个图表实例，在页面上显示一些数据

mounted() {
  this.chart = new PowerGraph();
}

在这里，我们必须调用图表实例的 destroy() 方法或实现我们自己的清理方法

beforeDestroy() {
  this.chart.destroy();
}

如果我们不在组件被销毁之前执行清理操作，那么这些内存将永远不会被释放，这将导致内存泄漏。

53) 解释 Vue.js 中 Vue 实例的所有生命周期事件或钩子。/ 解释带图的 Vue 实例的生命周期。

当 Vue 实例在 Vue.js 中创建时，它会经历一系列创建后的步骤。首先，它们被创建，然后挂载，最后被销毁。在此过程中，它还会运行称为生命周期钩子的函数。这些生命周期钩子允许开发人员在特定阶段添加自己的代码。

以下是 Vue 实例经历的所有事件或钩子列表

beforeCreate 事件：这是创建过程中发生的第一个事件或钩子。它允许开发人员在组件被添加到 DOM 之前执行操作。我们无法在此事件中访问 DOM。

created 事件：此事件用于在创建实例后运行代码。它允许您访问响应式数据，但模板和虚拟 DOM 的挂载或渲染尚未完成。

beforeMount 事件：在初始渲染发生之前，并在模板或渲染函数编译之后执行 beforeMount 事件。这是一个很少使用的事件，在大多数情况下，您不需要使用此事件。

mounted 事件：这是最常用的事件或钩子。在此事件中，您可以完全访问响应式组件、模板和已渲染的 DOM。

beforeUpdate 事件：在组件上的数据发生更改并且更新周期开始之前，将执行此事件。它在 DOM 被修补和重新渲染之前运行。

updated：在组件上的数据发生更改并且 DOM 重新渲染后，将执行此事件。如果您想在属性更改后访问 DOM，这是完成此操作的最佳位置。

beforeDestroy：在销毁实例之前，将执行此事件。这是 Vue 实例生命过程的倒数第二步，如果您需要清理事件或响应式订阅，这里是正确的位置。

destroyed：这是 Vue 实例生命过程的最后一步，用于执行任何最后的清理。

Vue 实例的生命周期图

下图显示了 Vue 实例的完整生命周期

54) Vue Router 是什么？您对 Vue Router 有何理解？

Vue.js 的官方路由器称为 Vue Router。它默认与 Vue.js 核心集成，并用于使用 Vue.js 构建单页应用程序。

以下是 Vue Router 的重要功能列表

Vue Router 遵循模块化、基于组件的路由器配置。
易于实现。
您可以自定义滚动行为。
提供嵌套路由/视图映射。
提供精细的导航控制。
路由参数、查询、通配符
js 的过渡系统提供视图过渡效果。
带自动活动 CSS 类的链接。
HTML5 历史模式或哈希模式，在 IE9 中自动回退。

55) Slots 和 Scoped Slots 在 Vue.js 中有什么区别？

在 Vue.js 中，slot 是子组件中的一个占位符，用从父组件传递过来的内容填充。

在 slot 中，组件在父作用域中编译，然后传递给子组件。因此，无法在 slot 的内容中使用子组件属性。

在 Scoped slot 中，您可以将子组件数据传递给父作用域，然后在 slot 内容中使用它。

56) Vue.js 中的虚拟 DOM 是什么？

在 Vue.js 中，虚拟 DOM 是一种树状数据结构或一组 JavaScript 对象，它们表示 DOM 节点。Vue.js 管理虚拟 DOM 的节点，这些节点应该在页面上渲染。这些对象称为“虚拟节点”或 VNodes。

57) 在 Vue.js 中使用虚拟 DOM 的主要目的是什么？/ 使用虚拟 DOM 的好处是什么？

虚拟 DOM 的主要目的是使 DOM 操作更快、更高效。当您的 DOM 中有很多节点时，它变得非常重要。在这种情况下，更新这些节点对于所需的处理能力和资源来说是一项非常昂贵的工作。在这里，虚拟 DOM 发挥作用，使 JavaScript 对象的速度显着提高。Vue.js 自动将 DOM 更新分批处理以提高效率。

58) Vue.js 应用中的组件之间如何传递数据？

在 Vue.js 中，数据使用 prop 或自定义属性从父组件传递到子组件。这个自定义属性成为子组件实例上的一个属性。这个过程称为单向数据流。

一旦父组件更新了 prop 值，子组件会自动更新。子组件可以通过事件与父组件通信，但不应修改子组件内的属性。除非是对象或数组，否则它不会影响父组件。当子组件实例触发一个事件时，父组件会为该事件分配一个处理程序，数据就会传回父组件。

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview