Vue 숙달도를 테스트하기 위해 꼭 물어봐야 할 인터뷰 질문 3가지를 확인해보세요!

이 기사에서는 Vue에 대한 숙달도를 테스트하고 올바르게 답할 수 있는지 확인하기 위해 꼭 물어봐야 할 인터뷰 질문 3개를 공유합니다!

질문 1: v-show와 v-if의 차이점은 무엇인가요? 이 질문은 면접관의 Vue 기본 사항을 검토하기 위한 것입니다. 일반적으로 Vue를 사용해 본 사람이라면 누구나 v-show와 v-if를 사용할 것입니다. (학습 영상 공유:

vue 영상 튜토리얼

) v-if 명령은 콘텐츠를 조건부로 렌더링하는 데 사용되며 v-show는 조건부 렌더링에도 사용됩니다. 디스플레이 요소.

v-show를 사용하는 요소는 DOM에 렌더링 및 유지되며 CSS 표시는 요소의 표시 및 숨기기를 제어하는 ​​데 사용됩니다. v-show는 <template> 요소를 지원하지 않으며 v-else도 지원하지 않습니다. v-if 指令用于条件性地渲染一块内容，而v-show也用于条件性展示元素。

使用v-show的元素会被渲染并保留在 DOM 中，并使用CSS的display来控制元素的显示和隐藏。v-show 不支持 <template> 元素，也不支持 v-else。

使用v-if 是“真正”的条件渲染，元素的事件监听器和子组件都会被销毁和重建。v-if 也是惰性的，如果初始条件为false，则并不会渲染，直到变为true才会触发第一次渲染。而v-show不管条件是什么都会渲染，并根据display属性来控制显示隐藏。

一般来说，v-if的切换开销更大，而v-show只有初始渲染开销，如果元素需要频繁地切换，使用v-show，如果条件很少改变，则使用v-if更好。

问题2：v-model 的原理？

v-model指令主要用来在<input>、<select>、<textarea>表单元素或者组件上来实现数据的双向绑定。他并没有多神奇，只是监听了用户的输入事件来对数据进行更新。

v-model会根据不同的元素来触发不同的事件：

• text 和 textarea 元素使用input 事件；
• checkbox / radio 和 select使用change 事件；

拿input表单举例：

<input v-model=&#39;something&#39;>

<!-- 等价于 -->

<input v-bind:value="something" v-on:input="something = $event.target.value">

如果在自定义组件中：

<!-- 父组件： -->
<ModelChild v-model="message"></ModelChild>

<!-- 子组件： -->
<template>
  <div>{{value}}</div>
</template>

<script>
  export default {
    props:{
      value: String
    },
    methods: {
      test1(){
         this.$emit('input', '小红')
      },
    },
  }
</script>

在父组件中，修改message的值，子组件内的props的value字段就会自动更改，在子组件内触发input事件，那么父组件中的message值也会被更改。

问题3：Vue 组件间通信有哪几种方式？

这道题也是面试非常常考的一道题，能答出的方式越多，说明对Vue掌握的越熟练。一般组件间的通信大致分为3种：父子组件通信、爷孙组件通信、兄弟组件通信，下面我们分别来看：

• props / $emit 适合父子组件间通信

  • 这也是Vue最基础的数据通信方式，如果这都不知道，那就没法往后聊了。

• ref 与 $parent / $children 适合父子组件间通信

  • ref如果用在组件上，可以拿到组件的实例对象，进行操作数据
  • $parent / $children：也可以访问父/子实例对象，进行数据操作

• EventBus （$emit / $on）  适合父子、爷孙、兄弟组件通信

  • 这种方法是通过场景一个空的Vue实例来作为事件中心，用它来触发事件和监听事件，从而实现任何组件间的通信。
  • 使用EventBus这种方式有很多弊端，不建议大家在项目中去使用，知道这种实现思路就可以。

• $attrs/$listeners 适合爷孙组件通信

  • $attrs：包含父作用域中不作为组件props和自定义事件的属性绑定和事件，并且可以通过 v-bind="$attrs" 传入内部组件。
  • $listeners：包含父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。注意：在 Vue 3 中已被移除。事件监听器现在是 $attrs 的一部分。

• provide / injectv-if를 사용하는 것은 "true" 조건부 렌더링이므로 요소의 이벤트 리스너와 하위 구성 요소가 삭제되고 다시 빌드됩니다. v-if도

  lazy
  입니다. 초기 조건이 false이면 렌더링되지 않으며, true가 될 때까지 첫 번째 렌더링이 트리거되지 않습니다. 그리고 v-show는 조건에 관계없이 렌더링되며, 디스플레이 속성에 따라 표시 및 숨기기를 제어합니다.
  • 일반적으로 v-if는 전환 오버헤드가 더 큰 반면, v-show는 초기 렌더링 오버헤드만 있습니다. 요소를 자주 전환해야 하는 경우 조건이 거의 변경되지 않으면 v-show를 사용하는 것이 좋습니다. 만약에.

• 질문 2: v-model의 원리는 무엇인가요?
  v-model 명령은 주로 <input>, <select>, <textarea> 양방향 데이터 바인딩을 달성하기 위한 양식 요소 또는 구성 요소. 그다지 마술적이지는 않습니다. 단지 사용자의 입력 이벤트를 듣고 데이터를 업데이트하는 것뿐입니다. 🎜🎜v-model은 다양한 요소에 따라 다양한 이벤트를 실행합니다. 🎜🎜🎜text 및 textarea 요소는 input 이벤트를 사용하고 🎜🎜checkbox/radio는 change 이벤트 사용을 선택합니다. ; 🎜🎜🎜입력 양식을 예로 들어 보겠습니다. 🎜rrreee🎜사용자 정의 구성 요소에 있는 경우: 🎜rrreee🎜상위 구성 요소에서 메시지 값을 수정하면 하위 구성 요소에 있는 props의 값 필드가 자동으로 변경됩니다. 하위 컴포넌트에서 입력 이벤트가 발생하면 상위 컴포넌트의 메시지 값도 변경됩니다. 🎜

  🎜🎜질문 3: Vue 구성 요소 간의 통신 방법은 무엇입니까? 🎜🎜🎜🎜이 질문은 인터뷰에서도 매우 흔한 질문입니다. 답변 방법이 많을수록 Vue에 더 능숙해집니다. 일반적으로 컴포넌트 간의 통신은 크게 아버지-아들 컴포넌트 통신, 할아버지-손자 컴포넌트 통신, 형제 컴포넌트 통신의 세 가지 유형으로 나누어 살펴보겠습니다. 🎜

  🎜🎜🎜props / $emit🎜 상위 컴포넌트와 하위 컴포넌트 간 통신에 적합합니다🎜🎜🎜이것도 Vue의 가장 기본적인 데이터 통신 방식입니다. 이것을 모르면 꽝입니다. 나중에 얘기하면 안 돼요. 🎜🎜🎜🎜🎜🎜ref 및 $parent / $children🎜은 상위 구성요소와 하위 구성요소 간의 통신에 적합합니다🎜🎜🎜ref 사용하는 경우 구성 요소에서 구성 요소의 인스턴스 개체를 가져오고 데이터를 조작할 수 있습니다🎜🎜$parent / $children: 부모/자식 인스턴스 개체에 액세스하여 수행할 수도 있습니다. 데이터 작업🎜🎜🎜🎜🎜 🎜EventBus ($emit / $on)🎜 부자, 할아버지, 손자, 형제 컴포넌트 통신에 적합🎜🎜🎜이 방법은 빈 Vue 인스턴스를 사용하는 것입니다. 이벤트 센터로 장면을 사용하여 이벤트를 트리거하고 이벤트를 수신하여 모든 구성 요소 간의 통신을 활성화합니다. 🎜🎜EventBus를 사용하면 많은 단점이 있습니다. 모든 사람에게 이 구현 아이디어를 사용하는 것은 권장되지 않습니다. 🎜🎜🎜🎜🎜🎜$attrs/$listeners🎜 할아버지-손자 구성 요소 통신에 적합🎜🎜🎜$attrs: 포함되지 않은 항목 포함 상위 범위 속성 바인딩 및 이벤트에서 구성요소 소품 및 사용자 정의 이벤트로 v-bind="$attrs"를 통해 내부 구성요소로 전달될 수 있습니다. 🎜🎜$listeners: 상위 범위에 v-on 이벤트 리스너(.native 수정자 없음)를 포함합니다. v-on="$listeners"를 통해 내부 구성요소로 전달될 수 있습니다. 🎜참고: Vue 3에서는 제거되었습니다. 이벤트 리스너는 이제 $attrs🎜의 일부입니다. 🎜🎜🎜🎜🎜🎜provide/inject🎜 할아버지-손자 컴포넌트 통신에 적합 🎜🎜🎜 Grandchild 컴포넌트에서 Provide를 통해 변수를 제공하고, Grandchild 컴포넌트에서 Inject를 통해 변수를 주입합니다. 🎜🎜🎜🎜🎜🎜Vuex는 아버지와 아들, 할아버지와 손자, 형제 간의 컴포넌트 커뮤니케이션에 적합합니다🎜🎜
  • Vuex는 Vue 애플리케이션의 상태 관리 문제를 해결하도록 특별히 설계되었습니다.

(학습 영상 공유: 웹 프론트엔드 개발, 기본 프로그래밍 영상)

위 내용은 Vue 숙달도를 테스트하기 위해 꼭 물어봐야 할 인터뷰 질문 3가지를 확인해보세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!