Vue.js の初心者向け面接の質問 25 選-jsチュートリアル-php.cn

Vue.js の初心者向け面接の質問 25 選

1. Vue が「プログレッシブフレームワーク」と呼ばれるのはなぜですか?

プログレッシブフレームワークの使用コストは小さいため、既存のプロジェクト (他のテクノロジを使用して構築されたプロジェクト) が新しいフレームワークを採用して移行することが容易になります。 Vue.js は、プログラム全体を最初から書き直すことなく、既存のアプリケーションに徐々に導入できるため、進歩的なフレームワークです。

Vue の最も基本的かつ核となる部分には「ビュー」層が含まれるため、徐々にプログラムに Vue を導入し、「ビュー」実装を置き換えることから始めてください。

Vue は進化する性質により、他のライブラリとうまく連携し、非常に簡単に始めることができます。これは、既存のプログラムを完全にリファクタリングしてフレームワーク内に実装する必要がある Angular.js のようなフレームワークとは対照的です。

2. Vue.js の宣言的レンダリングとは何ですか?

Vue.js を使用すると、データのレンダリングが簡単になり、内部実装が非表示になります。たとえば、次のコード:

HTML

<p id=”app”></p>

ログイン後にコピー

JavaScript

const greeting = “Hello there!”;
const appp = document.getElementById(“app”);
appp.innerText = greeting;

ログイン後にコピー

上記のコードスニペットは、 ID が「app」の場合 p.1 に「こんにちは！」と表示されます。コードには、結果を達成するために必要なすべての手順が含まれています。まず ID が「app」の DOM 要素を選択し、次に innerText プロパティを使用して p の内容を手動で設定します。

それでは、Vue でそれを行う方法を見てみましょう。

テンプレート

<p id=”app”>{{ greeting }}</p>

ログイン後にコピー

アプリ

new Vue({
    data: {
       greeting: ‘Hello There!’
    },
   el: ‘#app’
});

ログイン後にコピー

Vue プログラムで「greeting」という名前のデータ属性を作成しましたが、内部実装を気にせずに、mustache 構文を使用して p に「greeting」と入力するだけで済みます。「greeting」変数を宣言すると、残りは Vue が行います。宣言的レンダリングは次のようになります。 Vue は内部情報を非表示にして管理します。

3. オブジェクトのプロパティを調べるにはどのコマンドを使用しますか?

オブジェクトまたは配列を反復するには、v-for ディレクティブを使用できます。以下に例を示します。

テンプレート

<p id="app">
    <ul>
      <li v-for="(value, key) in card">{{ key }} - {{ value }}</li>    </ul>
 </p>

ログイン後にコピー

アプリ

new Vue({
  el: &#39;#app&#39;,
  data: {
    card: {
      name: &#39;John Doe&#39;,
      age: 25,
      city: &#39;New York&#39;,
      country: &#39;US&#39;
    }
  }
});

ログイン後にコピー

出力

名前 - John Doe
#年齢 - 25
都市 - ニューヨーク
国 - US

4. 指定Vue プログラムの出力を説明するテンプレート。

Template:

{{title}}

ログイン後にコピー

App:

new Vue({ 
    el: &#39;#app&#39;, 
    data: { 
        title: &#39;Vue.js&#39; 
    } 
})

ログイン後にコピー

上記のコードは、p<h1 style="color: green;"> Vue で文字列を出力します。 .js</h1>。タグ全体が文字列としてレンダリングされる理由は、Mustache テンプレートタグ {{title}} が受信データを文字列として扱い、それを実行可能コードに解析しないためです。これは、悪意のあるコードがページに挿入される XSS 関連の問題を軽減するのにも役立ちます。これは、JavaScript で elementSelector.innerText = text ステートメントを使用するのと似ています。

5. 入力ボックスとデータ属性の間の双方向データバインディングを実装するにはどうすればよいですか?

双方向データバインディングを実装するには、v-model ディレクティブを使用できます。 v-model ディレクティブは主に糖衣構文です。

<input type="text" :value="nameInput" @keyup="nameInput = $event.target.value">

ログイン後にコピー

上記のステートメントでは、「keyup」イベントが観察されるたびに、「nameInput」という名前のデータ属性が入力ボックスの値に設定されます。同時に、入力ボックスの value 属性を「nameInput」データ属性にバインドします。これにより、フォームフィールドとデータ属性の間に双方向のデータ関係が確立されます。

v-model は、手動で設定するよりも効率的にこれを行うことができます。 v-model を使用して上記の効果を再現するには、同じ入力ボックスに次のように再度入力します:

<input type="text" v-model="nameInput">

ログイン後にコピー

双方向データバインディングを実装する場合、使用されるデータ属性は事実上のソースとみなされます。データ属性に対して行われた変更は、フォームフィールドでのユーザー入力イベントよりも優先されます。

6. 要素上のクリックイベントをどのようにキャプチャしますか?

v-on:click ディレクティブを使用して、Click イベントをキャプチャできます。このコマンドは、省略記号 @click で表すこともできます。以下に例を示します:

v-on:clicksymbol

<a v-on:click=”clickHandler”>Launch!</a>

ログイン後にコピー

@clicksymbol

<a @click=”clickHandler”>Launch!</a>

ログイン後にコピー

7.ダイナミックプロップ?

v-bind ディレクティブを使用してプロパティにバインドされた関数としてプロパティに値を割り当てる場合、それは動的プロパティと呼ばれます。たとえば、次のコンポーネントの tweet プロパティは、tweetText という名前のデータプロパティにバインドされています。これは、静的にハードコードされた値とは対照的です。このバインディングは常に一方向であり、データは親コンポーネントから子コンポーネントに流れることができ、その逆には流れないことを意味します。

<TweetBox :tweet=”tweetText”>

ログイン後にコピー

8. Vue.js のディレクティブとは何ですか?

ディレクティブは、テンプレート HTML タグに追加して特別な応答性を与えることができる一連の特別な属性です。ディレクティブを使用すると、テンプレート内の要素が、データプロパティ、メソッド、計算プロパティまたは監視プロパティ、インライン式を使用して定義されたロジックに基づいて変更に反応できるようになります。たとえば、次のコードは v-on ディレクティブを使用して、コンポーネントにクリックイベントリスナーを実装します。

<SignUpButton v-on:click=”doSignup” />

ログイン後にコピー

<SignUpButton @click=”doSignup” />

ログイン後にコピー

この例では、v-if ディレクティブを使用して、showButton というデータ属性に基づいて要素とコンポーネントを表示または削除します。 v- で始まるディレクティブは、Vue 固有のプロパティを示します。この規則の例外は、v-on および v-bind の短縮形です。

<SignUpButton v-if=”showButton” />

ログイン後にコピー

Vue では、独自のカスタムディレクティブを定義することもできます。

9. v-show 指令的用途是什么？

v-show 指令允许有条件地显示元素。在下面的代码中，仅当 isDisplayed 数据属性为 true 时，才会显示该元素。

 <TweetBox v-show=”isDisplayed”>

ログイン後にコピー

使用 v-show 指令时，可使用 CSS 的 display 属性切换元素的可见性。

10. v-show 与 v-if 指令有何不同？

v-show 和 v-if 都用于有条件地显示元素，而后者提供了条件渲染的真正实现。 v-show 只需切换 CSS 的 display 属性即可显示或隐藏元素，而 v-if 指令可创建或销毁组件。每次显示状态更改时，代价通常会更大。

另一方面，v-show 成本较低，因为它仅切换元素的CSS显示属性。所以如果必须经常切换元素，则 v-show 会提供比 v-if 更好，更优化的结果。

就加载元素的初始渲染成本而言，v-if 不会渲染最初隐藏的元素的节点，而 v-show 会渲染其 CSS display 属性被设置为 none 的元素。

11. 对于作为元素实现的注释框，我们希望使用户能够按下键盘上的Enter键，来将内容提交给名为 “storeComment” 的方法。在代码中对此进行演示。

可以在任何元素上使用 v-on 指令来实现事件侦听器。此外，v-on 还允许我们将按键修饰符用于 “enter”，“tab”，“esc”，“space” 等常见按键。这是一个例子：

模板

<textarea @keyup.enter="storeComment"></textarea>

ログイン後にコピー

App

new Vue({
  el: &#39;#app&#39;,
  methods: {
    storeComment(event) {
     //access the value of the textarea box using event.target.value or 
     //              use v-model to bind to a data property
    }
  }
});

ログイン後にコピー

12. 如何在单页 Vue 应用（SPA）中实现路由？

可以通过官方的 vue-router 库在用 Vue 构建的 SPA 中进行路由。该库提供了全面的功能集，其中包括嵌套路线、路线参数和通配符、过渡、HTML5 历史与哈希模式和自定义滚动行为等功能。 Vue 还支持某些第三方路由器包。

13. 使用 Vue 时调用 event.preventDefault() 的最佳方式是什么？

在事件侦听器上调用 event.preventDefault() 的最佳方式是将 .prevent 修饰符与 v-on 指令一起使用。这是一个例子：

<a @click.prevent=”doSomethingWhenClicked”>Do Something</a>

ログイン後にコピー

14. 什么是过滤器？

过滤器是在 Vue 程序中实现自定义文本格式的一种非常简单的方法。它们就像可以在表达式中通过管道传递（使用管道字符）以取得结果的运算符。下面是一个可以反转文本字符串的过滤器示例：

模板

<p id="app">{{ title | reverseText }}</p>
App
new Vue({
    el: &#39;#app&#39;,
    data: {
      title: &#39;This is a title&#39;
    },
    filters: {
      reverseText(text) {
        return text.split(&#39;&#39;).reverse().join(&#39;&#39;);
      }
    }
});

ログイン後にコピー

输出

eltit a si sihT

ログイン後にコピー

在上面的例子中，我们创建了一个名为 reverseText 的过滤器，该过滤器反转文本字符串并返回。这是一个简单的函数，接受输入并返回处理后的输出。通过在过滤器下声明，它就可以成为可以在模板中使用的过滤器。

在模板中，我们只是将 reverseText 过滤器通过管道传递到了想要在 mustache 标签中显示的数据变量。这样可以将多个过滤器管道连接在一起。因此过滤器提供了一种非常优雅的方式来处理文本。

15. 如何动态地在元素上切换 CSS 类？

Vue 允许我们绑定到 class 属性。在下面的例子中，我们将 class 属性绑定到一个对象，该对象允许使用 data 属性切换类。

模板

<p :class=”{ pStyle : showp }”></p>

ログイン後にコピー

App

new Vue({
    el: &#39;#app&#39;,
    data: {
 showp: true
    }
});

ログイン後にコピー

在上面的代码中，只要数据属性 showp 为 true，类名 pStyle 将应用于 p。

16. 绑定 HTML 类时，该如何连接类？假设存在一个元素：Process。我们只希望使用名为 “isActive” 的数据属性动态地切换 btnActive 类。

这可以在绑定类时用 Array 来实现。以下是实现方法：

模板

<Button :class=”[‘btn’, ‘btnRed’, { btnActive : isActive }]”>Process</button>

ログイン後にコピー

App

new Vue({
    el: &#39;#app&#39;,
    data: {
      isActive: true
    }
});

ログイン後にコピー

在上面的代码段中，将串联各个类的数组，并基于 isActive 数据属性的值对对象中的表达式进行响应式评估。

17. 什么是计算属性？

计算属性是一类特殊函数的结果，当从属属性发生变化时，这些函数会自动进行计算。用它们代替内联表达式可以更好地表达复杂的逻辑，在模板中不能作为内联表达式合并。

每个计算方法都可以在模板部分作为属性使用。当从属属性更改时，计算方法将自动计算并缓存结果，这样比使用普通方法更好。方法在访问时将始终会重新计算，而如果自上一次计算和缓存阶段以来该方法内使用的属性未发生更改，则计算的属性将不会重新计算。

需要注意的是，仅当方法中使用的属性是响应性的（例如数据属性）时，才考虑依赖关系的更改。

这是一个演示计算属性的简单例子：

模板

<p id="app">
  <input type="text" v-model="email" :class="{ invalid : isInvalid }">
</p>

ログイン後にコピー

App

const emailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@
((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

new Vue({
    el: &#39;#app&#39;,
    data: {
      email: &#39;&#39;
    },
    computed: {
      isInvalid() {
        return !emailRegEx.test(this.email);
      }
    }
});

ログイン後にコピー

在上面的代码示例中，如果正则表达式测试针对电子邮件输入框失败，则 isValid 计算属性将返回 true。如果电子邮件验证程序认为输入的值无效，就会看到文本框便为红色（你必须创建一个名为 .invalid 的类，并将背景颜色属性设置为红色）。当用户键入内容时，将重新执行计算的方法，并且在验证格式之后，动态删除无效的类。

18. 如何确保在单文件组件中定义的 CSS 样式仅应用于该组件，而不被用于其他组件？

这可以通过样式标签上的 scoped 属性来实现。在内部 Vue 使用 PostCSS 插件为所有样式元素分配唯一的数据属性，然后使样式针对这些唯一的元素。举个例子：

<template>
    <p class=”title”>This is a title</p>
</template>
<style scoped>
    .title {
        font-family: sans-serif;
        font-size: 20px;
</style>

ログイン後にコピー

19. 如何将数据从父组件传递到子组件？

可以用作为组件中单向入口的 prop 把数据向下传递到子组件。这是一个例子：

<template>
    <p>
      <contact-list-item v-for=”contact in contacts” :contact=”contact” />
   </p>
</template>
<script>
    import ContactListItem from ‘./ContactListItem’;
    export default {
name: ‘address-book’,
data: function() {
return {
contacts: [.....]
}
},
components: {
ContactListItem
}
}
</script>

ログイン後にコピー

contact-list-item 上绑定的 prop “contact” 是一个入口，用于从用作子项的父组件接收数据。在 contact-list-item 组件中：

<template>
    <p>
        <span>{{ contact.name }}</span>
        <span>{{ contact.email }}</span>
   </p>
</template>
 
<script>
    export default {
     name: ‘contact-list-item’,
props: [‘contact’]
    }
</script>

ログイン後にコピー

在这里声明了一个名为 “contact” 的 prop 引入数据，然后可以直接在模板部分中显示。

20. 什么是组件？

组件本质上是 Vue 实例，它们封装模板、逻辑和可选的本地响应性数据属性，能够提供可重新使用的自定义构建元素。可重用性是构建组件的核心。

使用单文件组件构建应用程序时，组件在扩展名为 .vue 的文件中定义。单文件组件包含三个部分：模板部分定义了该组件的 HTML 布局；脚本部分定义了数据、属性和逻辑单元（如方法）并将内容导出为 Vue 组件；还有一个样式部分，用于定义组件的样式表。单文件组件使用 Webpack 等模块捆绑器进行编译。

21. 什么是生命周期hook？列出一些生命周期hook。

Vue 实例（组件）从其初始化到销毁和删除都经历生命周期。在整个过程中，Vue 允许开发人员运行自定义函数的几个阶段。这些函数称为生命周期 hook。以下是一些生命周期 hook 的列表：

created
mounted
updated
destroyed

22. 什么是插槽（slot）？

插槽允许你定义可以封装和接受子 DOM 元素的元素。组件模板中的 <slot> </ slot> 元素作为通过组件标签捕获的所有DOM元素的出口。这是一个例子：

Post.vue |实现插槽的组件

<template>
 <p class="hello">
   <h3 class="title">{{title}}</h3>
   <p class="content">
     <slot></slot>
   </p>
 </p>
</template>

ログイン後にコピー

App.vue | 使用Post组件的App组件

<template>
 <p id="app">
   <Post title="Hello from Vue!">
Vue 是用于构建用户界面的渐进框架。与其他框架不同，Vue从头开始设计以逐渐采用。
核心库仅集中在视图层，并且很容易与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时，
Vue也完全能够为复杂的单页应用程序提供支持。
   </Post>
 </p>
</template>

ログイン後にコピー

在上面的示例中，斜体文本显示在 Post 组件中标有 <slot> 元素的区域内。