25 초보자 Vue.js 인터뷰 질문

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에 "Hello there!"라는 문구를 표시합니다. 코드에는 결과를 달성하는 데 필요한 모든 단계가 포함되어 있습니다. 먼저 ID가 "app"인 DOM 요소를 선택한 다음 innerText 속성을 사용하여 p의 콘텐츠를 수동으로 설정합니다.

이제 Vue에서 어떻게 하는지 살펴보겠습니다.

Template

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

App

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

Vue 프로그램에서 "greeting"이라는 데이터 속성을 생성했는데, 걱정할 필요 없이 콧수염 구문을 사용하여 p에 "greeting"만 입력하면 됩니다. 내부적으로 구현했습니다. "인사말" 변수를 선언하면 Vue가 나머지 작업을 수행합니다. 이것이 선언적 렌더링의 모습입니다. Vue는 내부 정보를 숨기고 관리합니다.

3. 객체의 속성을 탐색하는 데 어떤 명령을 사용합니까?

객체나 배열을 반복하려면 v-for 지시어를 사용할 수 있습니다. 예는 다음과 같습니다.

Template

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

App

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

Output

• name - John Doe
• age - 25
• city - New York
• country - US

4. Vue 프로그램의 출력을 설명하는 템플릿을 제공합니다.

Template:

{{title}}

App:

new Vue({ 
    el: '#app', 
    data: { 
        title: 'Vue.js' 
    } 
})

위 코드는 p에 1ccdf49385041fee34afeec2ee9f42e4Vue.js473f0a7621bec819994bb5020d29372a 문자열을 출력합니다. 전체 태그가 문자열로 렌더링되는 이유는 콧수염 템플릿 태그 {{title}}가 수신 데이터를 문자열로 처리하고 실행 가능한 코드로 구문 분석하지 않기 때문입니다. 이는 또한 악성 코드가 페이지에 삽입되는 XSS 관련 문제를 완화하는 데도 도움이 됩니다. 이는 JavaScript에서 elementSelector.innerText = text 문을 사용하는 것과 유사합니다. fe8a06f48dc1b082bd833539947c5256Vue.js473f0a7621bec819994bb5020d29372a。之所以将整个标签渲染为字符串，是因为 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">

需要注意的是，当实现双向数据绑定时，使用的数据属性被认为是事实上的来源。在 data 属性上所做的任何更改都将优先于 form 字段上的用户输入事件。

6. 你如何捕获元素上的点击事件？

可以使用 v-on:click 指令捕获 Click 事件。该指令也可以用缩写符号 @click 表示。这是一个例子：

v-on:click 符号

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

@click 符号

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

7. 什么是动态 prop？

当使用 v-bind 指令为 prop 分配值作为绑定到属性的函数时，被称为动态 prop。例如以下组件的 tweet

5. 입력 상자와 데이터 속성 간의 양방향 데이터 바인딩을 구현하는 방법은 무엇입니까?

양방향 데이터 바인딩을 구현하려면 v-model 지시문을 사용할 수 있습니다. v-model 지시문은 주로 구문 설탕입니다.

<TweetBox :tweet=”tweetText”>

위 명령문에서 "keyup" 이벤트가 관찰될 때마다 "nameInput"이라는 데이터 속성이 입력 상자의 값으로 설정됩니다. 동시에 입력 상자의 값 속성을 "nameInput" 데이터 속성에 바인딩합니다. 이는 양식 필드와 데이터 속성 사이에 양방향 데이터 관계를 설정합니다.

v-model은 수동으로 설정하는 것보다 이 작업을 더 효율적으로 수행할 수 있습니다. v-model을 사용하여 위의 효과를 복제하려면 동일한 입력 상자에 다음을 다시 입력하십시오.

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

양방향 데이터 바인딩을 구현할 때 사용된 데이터 속성이 사실상 소스로 간주된다는 점에 유의하는 것이 중요합니다. 데이터 속성에 대한 모든 변경 사항은 양식 필드의 사용자 입력 이벤트보다 우선합니다.

6. 요소의 클릭 이벤트를 어떻게 캡처합니까?

v-on:click 지시문을 사용하여 Click 이벤트를 캡처할 수 있습니다. 이 명령은 약어 기호 @click으로 표시될 수도 있습니다. 예는 다음과 같습니다. 🎜🎜v-on:click 기호🎜

<SignUpButton @click=”doSignup” />

🎜@click 기호🎜

<SignUpButton v-if=”showButton” />

🎜 7. 동적 소품이란 무엇입니까? 🎜🎜property에 바인딩된 함수로 v-bind 지시어를 사용하여 prop에 값을 할당하는 경우 이를 동적 prop이라고 합니다. 예를 들어, 다음 구성 요소의 tweet 속성은 tweetText라는 데이터 속성에 바인딩됩니다. 이는 정적 하드코딩된 값과 반대입니다. 이 바인딩은 항상 단방향입니다. 즉, 데이터는 상위 구성 요소에서 하위 구성 요소로 흐를 수 있으며 그 반대 방향으로는 절대 흐를 수 없습니다. 🎜

 <TweetBox v-show=”isDisplayed”>

🎜8. Vue.js의 지시어는 무엇인가요? 🎜🎜지시문은 템플릿 HTML 태그에 추가하여 특별한 반응성을 제공할 수 있는 일련의 특수 속성입니다. 지시문을 사용하면 템플릿의 요소가 데이터 속성, 메서드, 계산되거나 감시된 속성 및 인라인 표현식을 사용하여 정의된 논리를 기반으로 변경 사항에 반응할 수 있습니다. 예를 들어, 다음 코드는 v-on 지시어를 사용하여 구성 요소에 클릭 이벤트 리스너를 구현합니다. 🎜

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

🎜 또는 🎜

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

🎜 이 예에서는 v-if 지시어를 사용하여 showButton이라는 데이터 속성을 기반으로 요소와 구성 요소를 표시하거나 제거합니다. 🎜v-🎜로 시작하는 지시문은 Vue 관련 속성을 나타냅니다. 이 규칙의 예외는 v-on 및 v-bind의 단축 형식입니다. 🎜

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

🎜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: '#app',
  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 属性切换类。

模板

a6ac97d030f487925eacc686408f064094b3e26ee717c64999d7867364b1b4a3

App

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

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

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

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

模板

b5e2e16f2f344d8ec65b0b72c8c5c91aProcess65281c5ac262bf6d81768915a4a77ac0

App

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

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

17. 什么是计算属性？

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

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

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

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

模板

2fb1ec095997abb5abb99340125c8b3b
  2f0a1a4e6857d0dcd9df41d4d7145106
94b3e26ee717c64999d7867364b1b4a3

App

const emailRegEx = /^(([^a8093152e673feb7aba1828c43532094()\[\]\\.,;:\s@"]+(\.[^a8093152e673feb7aba1828c43532094()\[\]\\.,;:\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: '#app',
    data: {
      email: ''
    },
    computed: {
      isInvalid() {
        return !emailRegEx.test(this.email);
      }
    }
});

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

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

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

d477f9ce7bf77f53fbcf36bec1b69b7a
    42967cef1e90281232ee6f23dbc41236This is a title94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2
c977fa5678fe78cf54b097005108eb8c
    .title {
        font-family: sans-serif;
        font-size: 20px;
531ac245ce3e4fe3d50054a55f265927

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

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

d477f9ce7bf77f53fbcf36bec1b69b7a
    e388a4556c0f65e1904146cc1a846bee
      e293915c6962aa9ecb16020f728dd911
   94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
    import ContactListItem from ‘./ContactListItem’;
    export default {
name: ‘address-book’,
data: function() {
return {
contacts: [.....]
}
},
components: {
ContactListItem
}
}
2cacc6d41bbb37262a98f745aa00fbf0

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

d477f9ce7bf77f53fbcf36bec1b69b7a
    e388a4556c0f65e1904146cc1a846bee
        45a2772a6b6107b401db3c9b82c049c2{{ contact.name }}54bdf357c58b8a65c66d7c19c8e4d114
        45a2772a6b6107b401db3c9b82c049c2{{ contact.email }}54bdf357c58b8a65c66d7c19c8e4d114
   94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2
 
3f1c4e4b6b16bbbd69b2ee476dc4f83a
    export default {
     name: ‘contact-list-item’,
props: [‘contact’]
    }
2cacc6d41bbb37262a98f745aa00fbf0

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

20. 什么是组件？

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

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

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

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

• created
• mounted
• updated
• destroyed

22. 什么是插槽（slot）？

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

Post.vue |实现插槽的组件

d477f9ce7bf77f53fbcf36bec1b69b7a
 889c467f53be0c0d4e7d0d985361b565
   c3606beab6681aa5853aec0b47ea0fb5{{title}}39528cedfa926ea0c01e69ef5b2ea9b0
   bf6874f3abc615a5ee665c11de5510df
     58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee
   94b3e26ee717c64999d7867364b1b4a3
 94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2

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

d477f9ce7bf77f53fbcf36bec1b69b7a
 2fb1ec095997abb5abb99340125c8b3b
   0190b473a42bafadc34d7127a15c6268
Vue 是用于构建用户界面的渐进框架。与其他框架不同，Vue从头开始设计以逐渐采用。
核心库仅集中在视图层，并且很容易与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时，
Vue也完全能够为复杂的单页应用程序提供支持。
   69fdf200a32aa4c1d14a166c5d848b9d
 94b3e26ee717c64999d7867364b1b4a3
21c97d3a051048b8e55e3c8f199a54b2

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

23. 什么是观察者？

观察者允许我们观察更改的特定属性，并执行定义为函数的自定义操作。尽管它们的用例与计算的属性相交叉，但是当某些数据属性发生改变时，有时需要观察者执行自定义操作或运行代价昂贵的操作。

24. 如何从子组件发出自定义事件？

可以用 $emit('event-name', eventPayload)发出自定义事件。然后可以像其他事件一样，用 v-on 指令在父组件上拦截。

25. 开发人员经常使用字母 “vm” 作为变量名来声明根 Vue 实例。例如 const vm = new Vue()。在这种情况下，“vm”指的是什么？

虽然这不是约定，但是开发人员经常使用变量名称 'vm' 来命名根 Vue 实例，该变量名称代表 'ViewModel'，因为 Vue 本质上负责视图层，并且部分受到了 MVVM 模式的启发（Model-View-View-Model）。但是，根本没有必要将根实例命名为 “vm”。

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

위 내용은 25 초보자 Vue.js 인터뷰 질문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!