前端框架及项目面试之聚焦Vue【基础篇】

很多同学问我面试应该准备什么，前端面试官经常会提问什么，以及我们该怎么去回答，什么样的方式才能让我们更好的去应对面试？那这个问题呢其实要分开说的，如果是对于基础面试题的话，其实这个还是比较好准备的。那我之前呢也出过一些前端JS基础面试题，很多同学可能已经看过：

面试中被问到最多的 19 个 JavaScript 问题

但是基础之外的一些高级面试题其实是不太好准备的，因为它范围比较大，而且内容比较多，但是呢我也没有放弃。就是在最近的一段时间之内，我每天都会去看去搜，去积累一些东西，然后去总结一些思路，今天分享给大家前端框架及项目面试之聚焦Vue【基础篇】

图片说明

介绍

Vue（读作 /vjuː/，类似于 view）是一个用于构建 Web 用户界面的渐进式 JavaScript 框架。它提供了帮助使网站和应用程序更快、更动态的工具。

基于标准 HTML、CSS 和 Javascript 构建的 Vue 是轻量级的，并利用虚拟 DOM 来修改 HTML 标记，使其速度非常快。

为什么 Vue 被称为“渐进式框架”？

Vue 是渐进式的，因为你可以在任何地方使用它，从现有 Web 应用程序中的简单插入功能到为大型应用程序（如社交媒体或视频流 Web 应用程序）的全功能框架添加一些交互性。

Vue 在其生态系统中的核心库之外的众多库具有增量适应性，并且足够灵活以支持外部库，使我们能够创建更复杂的多功能应用程序。

快速开始

要使用 Vue，我们可以将其库链接到现有 Web 应用程序中的脚本标记中，如下所示，或者在构建工具的支持下使用它（我会在后面的文章中讨论这个主题）。

<script src="https://unpkg.com/vue@3"></script>
<div id="app"></div>
<script>
  let app = Vue.createApp({}).mount("#app");
</script>

然后定义一个 HTML 块，它的选择器最好是在 Vue 实例的 mount 函数中传递的id 。

一个简单的 Vue 应用程序

Vue 应用程序的剖析由两部分组成，一个 HTML 模板和一个 Vue 实例。

在我们的例子中，在从 unpkg 链接我们的 Vue 库之后，我们应该通过放置一个 HTML 块来效仿，该块将作为我们应用程序的可见部分（模板）所在的部分和 Vue 实例，这是我们的不可见部分大部分逻辑都应该放置的应用程序。

让我们分解两个部分。

模板

Vue 应用程序的模板是一个 HTML 块，它具有唯一的选择器属性，我们不应该在 DOM 树的任何其他部分使用该属性，以免我们的 Vue 应用程序产生意料之外的结果。

<div id="app"> {{ greetings }} </div>

变量greetings周围的双花括号就是所谓的“Mustache”语法。Mustache 是许多模板语言中的一个突出分隔符，用于允许将文本插值到模板的最终标记中。
简单来说，Vue 将花括号内的所有内容替换为最终标记中应用于封闭变量的相应 JavaScript 表达式，只有在 Vue 实例中声明了变量时才会执行此操作，否则 Vue 会抛出错误。

Vue 实例

我们应用程序的第二部分是 Vue 实例。一个新的 Vue 实例被初始化，Vue.createApp()然后通过在挂载函数中传递来自我们模板的特殊选择器附加到模板，渲染 Vue 应用程序的模板部分中的所有内容。

<script>
  let app = Vue.createApp({
    return{
      return {
        message: "Hello World"
      }
    }
  }).mount("#app");
</script>

返回包含我们的问候变量的 Object 的 data 属性是 Vue 实例的属性之一，它为我们在 Vue 应用程序中使用提供反应性数据。

更多关于 Vue 中的变量和反应性的信息将在以后的文章中介绍。

下面是一个简单的 Vue 应用程序示例，运行时会在生成的 HTML 页面上显示消息“Hello World”。

<script src="https://unpkg.com/vue@3"></script>

<div id="app"> {{ message }} </div>

<script>
  let app = Vue.createApp({
    data(){
      message: "Hello World"
    }
  }).mount("#app");
</script>

Vue 支持在同一页面上运行多个实例，在上面的示例中我们可以添加一个新的 Vue 实例，如下所示。

<script src="https://unpkg.com/vue@3"></script>

<div id="app"> {{ message }} </div>

+ <div id="app-two"> {{ message }} </div>

<script>
  let app = Vue.createApp({
    data(){
      message: "Hello World"
    }
  }).mount("#app");

+ let secondApp = Vue.createApp({
+   data(){
+     message: "我从另一个 Vue 应用程序实例运行。"
+   }
+ }).mount("#app-two");
</script>

因此，我们可以在一个网页中拥有多个 Vue 应用程序来执行不同的任务，或者添加多个功能。
在现实世界的场景中，一个实例可能正在显示图像幻灯片，而另一个实例可能正在通过 HTTP API 调用将新闻通讯电子邮件提交到远程数据库。

Vue 用例

Vue 拥有广泛的用例，涵盖整个前端开发。

我们可以使用它为现有的 Web 应用程序添加一点活力，例如添加一个简单的轮播或随着用户交互而变化的内容，例如鼠标移动或文本输入，以创建复杂的 Web 应用程序，例如具有多个类别的电子商务商店和支持路由的产品页面，通过 Vue 自己的库（如vue-router和vuex ）进行基于浏览器的数据存储，具有购物车、外部 API 调用请求等功能。

Vue 使开发人员能够从小处着手使用它，并支持增量添加其功能，而无需完全拆除现有应用程序来适应它。

无论是选择使用“vanilla”Vue 来创建应用程序还是使用众多久经考验的 Vue 框架之一，都取决于用例和偏好。

以下是一些流行的 Vue 框架的列表。