일반적인 Vue 인터뷰 질문 요약(답변 분석 포함)

이 기사에서는 Vue 인터뷰 질문(답변 분석 포함)을 공유하겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

기사에 포함된 정보는 인터넷에서 가져온 것이며 개인적인 학습 및 경험을 요약한 것입니다. 침해된 내용이 있으면 연락해 삭제해 주세요.

1. MVVM의 이해

MVVM은 Model-View-ViewModel의 약자입니다.

Model은 데이터 모델을 나타내며, 데이터 수정 및 운영을 위한 비즈니스 로직도 Model에서 정의할 수 있습니다.

View는 데이터 모델을 표시용 UI로 변환하는 UI 구성 요소를 나타냅니다.

ViewModel 모델 데이터의 변경 사항을 모니터링하고, 뷰 동작을 제어하고, 사용자 상호 작용을 처리합니다. 간단한 이해는 View와 Model을 동기화하고 Model과 View를 연결하는 개체입니다.

MVVM 아키텍처에서는 View와 Model이 직접 연결되지 않습니다. 대신 ViewModel을 통해 상호 작용하므로 View 데이터의 변경 사항이 Model 및 Model 데이터에 동기화됩니다. 변경 사항은 뷰에도 즉시 반영됩니다.

ViewModel은 양방향 데이터 바인딩을 통해 View 레이어와 Model 레이어를 연결하며 View와 Model 간의 동기화는 사람의 개입 없이 완전히 자동으로 이루어지므로 개발자는 비즈니스 로직에만 집중하면 되고 수동으로 작업할 필요가 없습니다. DOM의 경우 데이터 상태 동기화에 주의할 필요가 없습니다. 복잡한 데이터 상태 유지 관리는 MVVM에서 완벽하게 관리됩니다.

2. Vue는 양방향 데이터 바인딩을 구현합니다.

Vue는 주로 게시자-구독자 모델과 결합된 데이터 하이재킹을 사용하고 Object.defineProperty()를 통해 각 객체를 하이재킹합니다. 속성의 setter 및 getter는 데이터가 변경되면 구독자에게 메시지를 게시하여 해당 수신 콜백을 트리거합니다. 일반 Javascript 객체를 데이터 옵션으로 Vue 인스턴스에 전달하면 Vue는 해당 속성을 반복하고 Object.defineProperty를 사용하여 해당 속성을 getter/setter로 변환합니다. getter/setter는 사용자에게 표시되지 않지만 내부적으로 Vue가 종속성을 추적하고 속성에 액세스하고 수정될 때 변경 사항을 알릴 수 있습니다. (학습 영상 공유: vue 영상 튜토리얼)

{}}을 구문 분석하는 데 사용됨) 마지막으로 관찰자를 사용하여 데이터 변경을 달성하기 위해 관찰자와 컴파일 간의 통신 브리지를 구축합니다. -> 업데이트 보기 대화형 변경 사항( 입력)->gt ;데이터 모델은 양방향 바인딩 효과를 변경합니다.

3. Vue 구성 요소 간 매개변수 전송

1. 상위 구성 요소와 하위 구성 요소 사이에 값 전달

2를 전달합니다. 비상위 구성요소와 하위 구성요소 사이의 데이터 전송 및 형제 구성요소는 전송 스테이션과 동등한 이벤트 센터를 생성하는 값 ​​

4 v-show와 v-if의 차이점

• v-show와 v-if의 차이점:
  v-show는 CSS 전환, v-if는 완전 파괴 및 재생성 .

• 사용
  자주 전환할 때는 v-show 사용, 런타임 중 변경 사항이 거의 없을 때는 v-if 사용

• v-if='false' v-if는 조건부 렌더링이므로 false일 때는 렌더링되지 않습니다.

5. Vue의 수명주기

beforeCreate(생성 전) 데이터 관찰 및 초기화 이벤트가 시작되기 전

created(생성 후) 데이터 관찰, 속성 및 메서드 작업 및 초기화 완료 이벤트, $el 속성이 아직 표시되지 않았습니다.

beforeMount(로드 전)이 마운트 시작 전에 호출되고 관련 렌더 함수가 처음 호출됩니다. 인스턴스는 템플릿을 컴파일하고 데이터 및 템플릿의 데이터에서 html을 생성하는 구성을 완료했습니다. 현재 페이지에는 html이 마운트되지 않았습니다.

mounted (로드 후) el이 새로 생성된 vm.$el로 대체되고 인스턴스에 마운트된 후 호출됩니다. 인스턴스는 다음 구성을 완료했습니다. el 속성이 가리키는 DOM 객체를 위의 컴파일된 html 콘텐츠로 바꿉니다. 템플릿의 html을 html 페이지로 렌더링하는 작업을 완료합니다. 이 과정에서 Ajax 상호작용이 수행됩니다.

beforeUpdate(업데이트 전) 데이터가 업데이트되기 전에 호출됩니다. 이는 가상 DOM이 다시 렌더링되고 패치되기 전에 발생합니다. 추가 재렌더링 프로세스를 트리거하지 않고도 이 후크에서 상태를 추가로 변경할 수 있습니다.

updated(업데이트됨) 데이터 변경으로 인해 가상 DOM을 다시 렌더링하고 패치한 후 호출됩니다. 호출되면 컴포넌트 DOM이 업데이트되므로 DOM 종속 작업을 수행할 수 있습니다. 그러나 대부분의 경우 이 기간 동안 상태를 변경하는 것은 피해야 합니다. 업데이트의 무한 루프가 발생할 수 있기 때문입니다. 이 후크는 서버측 렌더링 중에는 호출되지 않습니다.

beforeDestroy (파괴 전) 인스턴스가 파기되기 전에 호출됩니다. 인스턴스는 여전히 완전히 사용 가능합니다.

destroyed (파괴 후) 인스턴스가 파기된 후 호출됩니다. 호출 후에는 모든 이벤트 리스너가 제거되고 모든 하위 인스턴스가 삭제됩니다. 이 후크는 서버측 렌더링 중에는 호출되지 않습니다.

1. Vue 수명주기는 무엇인가요?

답변: Vue 인스턴스 생성부터 소멸까지의 과정이 생명주기입니다. 생성 시작부터 데이터 초기화, 템플릿 컴파일, Dom 마운트→렌더링, 업데이트→렌더링, 소멸까지의 일련의 과정을 Vue의 생명주기라고 합니다.

2. Vue 라이프사이클의 역할은 무엇인가요?

답변: 수명 주기에는 여러 이벤트 후크가 있어 전체 Vue 인스턴스의 프로세스를 제어할 때 좋은 논리를 더 쉽게 형성할 수 있습니다.

3. Vue 수명주기에는 몇 단계가 있나요?

A: 생성 전/후, 로드 전/후, 업데이트 전/후, 파괴 전/후 등 총 8단계로 나눌 수 있습니다.

4. 페이지가 처음 로드될 때 어떤 후크가 실행되나요?

답변: 다음 beforeCreate, Created, beforeMount, Mount를 트리거합니다.

5. DOM 렌더링은 어떤 주기로 완료되나요?

답변: DOM 렌더링은 마운트된 상태에서 완료됩니다.

5. 바인딩된 클래스의 배열 사용법

• Object 메서드v-bind:class="{'orange': isRipe, 'green': isNotRipe}"v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
• 数组方法v-bind:class="[class1, class2]"
• 行内 v-bind:style="{color: color, fontSize: fontSize+'px' }"
Array 메서드v-bind:class="[class1, class2]"

inlinev-bind:style="{color: color,fontSize:fontSize+'px' }"

6. 계산된 속성과 감시 감시의 차이점

handler deep 깊은가? Immediate는 즉시 실행되는가?

Summary

일부 데이터를 다른 데이터와 함께 변경해야 하는 경우 계산을 사용하는 것이 좋습니다. 데이터 변경에 대한 일반적인 응답이 있는 경우 일부 비즈니스 로직 또는 비동기 작업을 수행할 때 watcher를 사용하는 것이 좋습니다

7. Vue의 라우팅 구현: 해시 모드 및 히스토리 모드

해시 모드:브라우저에서 중간 기호 "#", # 및 # 뒤의 문자는 해시라고 하며 window.location.hash로 읽혀집니다. 특징: 해시는 URL에 있지만 브라우저 작업을 안내하는 데 사용되지 않습니다. , 서버 측 보안에는 쓸모가 없으며 해시는 페이지를 다시 로드하지 않습니다. 해시 모드에서는 http://www.xxx.com과 같이 해시 기호 앞의 콘텐츠만 요청에 포함됩니다. 따라서 백엔드의 경우 경로의 전체 적용 범위가 달성되지 않더라도 404는 그렇지 않습니다. 실수로 반환됩니다.

history 모드: history는 HTML5의 새로운 기능을 채택하고 브라우저 기록 스택을 수정하는 pushState(), replacementState() 및 상태 변경을 모니터링하는 popState 이벤트라는 두 가지 새로운 메서드를 제공합니다. 기록 모드에서 프런트 엔드의 URL은 실제로 백엔드에 대한 요청을 시작하는 URL(예: http://www.xxx.com/items/id)과 일치해야 합니다. 백엔드에 /items/id에 대한 라우팅 처리가 부족한 경우 404 오류가 반환됩니다.

8. Vue, Angular, React의 차이점은 무엇인가요?

(버전이 지속적으로 업데이트되고 있어 다음 차이점은 그다지 정확하지 않을 수 있습니다. 저는 작업에 vue만 사용하고 있으며 Angle 및 React에 익숙하지 않습니다.)

두 명령 모두 지원: 내장 명령과 사용자 정의 명령 모두 지원: 내장 필터와 사용자 정의 필터는 모두 양방향 데이터 바인딩을 지원합니다.

차이점:

AngularJS는 종속성 주입 기능 추가 등 학습 비용이 높은 반면 Vue.js 자체에서 제공하는 API는 성능 측면에서 비교적 간단하고 직관적입니다. AngularJS는 더티 검사에 의존합니다. Watcher Vue.js는 종속성 추적 기반 관찰을 사용하고 비동기 대기열 업데이트를 사용하며 모든 데이터가 독립적으로 트리거됩니다.

2. React와의 차이점

동일점:

React는 특수 JSX 구문을 사용하며, Vue.js에서는 구성 요소 개발 시 .vue 특수 파일 형식 작성을 권장하며, 파일 콘텐츠 규칙에 대한 몇 가지 세부 정보가 있습니다. 둘 다 컴파일하고 사용해야 합니다. 핵심 아이디어는 동일합니다. 모든 것이 구성 요소이고 구성 요소 인스턴스가 중첩될 수 있습니다. 둘 다 개발자가 처리 요구 사항을 사용자 정의할 수 있는 합리적인 후크 기능을 제공합니다. 둘 다 내장된 열 번호가 없습니다. , Route 및 기타 기능은 플러그인으로 핵심 패키지에 로드됩니다. 믹스인 기능은 구성 요소 개발에서 지원됩니다.

차이점:

React에서 사용하는 Virtual DOM은 렌더링된 결과에 대해 더티 체크를 수행합니다. Vue.js는 템플릿에 지침, 필터 등을 제공하여 Virtual DOM을 매우 편리하고 빠르게 작동할 수 있습니다.

9. 이벤트 수정자

• 기본 클릭 이벤트 바인딩: 기본 추가,

• 기타 이벤트 수정자: 자체 방지 중지

• 키 조합: click.ctrl.exact만 ctrl만 실행됩니다. 눌렀을 때

10. 구성 요소의 데이터가 함수인 이유

왜 구성 요소의 데이터는 함수이고 객체를 반환해야 하는 반면, 새 Vue 인스턴스에서는 데이터가 될 수 있습니다. 직접 객체?

컴포넌트를 재사용하기 때문에 JS의 객체는 참조 관계이므로 범위가 분리되지 않으며, 새로운 Vue 인스턴스도 재사용되지 않으므로 객체 참조에 문제가 없습니다

Vue의 경우 집합의 이해입니다. of Progressive Framework

11. 프로그레시브의 의미는 최소한의 옹호를 의미합니다.

Vue는 어떤 면에서는 React나 Angular만큼 좋지 않을 수 있지만 점진적이고 강력한 주장이 없습니다. 원래의 대규모 시스템 위에 하나 또는 두 개의 구성 요소를 구현하고 jQuery로 사용할 수 있습니다. 전체적으로 사용할 수도 있습니다. 온 가족이 함께 개발하여 Angular로 사용할 수도 있습니다. 자신의 디자인의 전체 하위 레이어와 일치하도록 뷰를 사용할 수도 있습니다. 기본 데이터 로직에서 OO 개념과 디자인 패턴을 사용할 수도 있고, 함수형 메서드를 사용할 수도 있습니다. 이는 해야 할 일만 수행하고 하지 말아야 할 작업은 수행하지 않습니다. 더. 내가 이해하는 진보의 의미는 필요한 것 이상을 하지 않는다는 것입니다.

12. vue.js의 두 코어는 무엇인가요?

데이터 기반 및 구성 요소화

13. vue에서 key 값의 역할key 值的作用

使用key来给每个节点做一个唯一标识

key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

14、v-for 与 v-if 的优先级

v-for的优先级比v-if高

15、组件

1、vue中子组件调用父组件的方法

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法。

第二种方法是在子组件里用$emit

키를 사용하여 각 노드를 고유하게 식별합니다

키의 역할은 주로 효율성을 위한 것입니다. DOM. 또한 Vue에서 동일한 태그 이름을 가진 요소의 전환 전환을 사용할 때 Vue가 이를 구별할 수 있도록 하는 목적도 사용됩니다. 그렇지 않으면 Vue는 내부 속성만 교체하고 전환을 트리거하지 않습니다. 효과.

v-if보다 우선순위가 높습니다.

• 첫 번째 방법은 하위 컴포넌트의 this.$parent.event를 통해 직접 상위 컴포넌트의 메소드를 호출하는 것입니다.
  

  두 번째 방법은 하위 구성 요소에서 $emit를 사용하여 상위 구성 요소에 대한 이벤트를 트리거하는 것이며, 상위 구성 요소는 이 이벤트를 수신할 수 있습니다.

• 2. Vue의 상위 구성요소는 하위 구성요소의 메소드를 호출합니다.

• 상위 구성요소는 ref 속성을 사용하여 하위 구성요소 메소드를 작동합니다.

  父：
  <child ref="childMethod"></child>
  子：
  method: {
    test() {
       alert(1)
    }
  }
  在父组件里调用test即 this.$refs.childMethod.test()

  로그인 후 복사
  
  
  3. vue 구성 요소 간 값 전송

(1) 상위 구성 요소가 하위 구성 요소에 값을 전달합니다.

상위 구성 요소가 하위 구성 요소를 호출할 때 속성의 동적 바인딩

<parent :dataList=&#39;dataList&#39;></parent>

로그인 후 복사

하위 구성 요소 정의 props는 동적으로 바인딩된 속성을 받습니다. props: ['dataList']

• (2) 하위 구성 요소는 상위와 하위 사이의 속성과 메서드를 적극적으로 얻습니다.

  🎜에서 사용됩니다. 하위 구성 요소 this.$parent.property/this.$parent.method. 🎜🎜(3) 하위 구성 요소는 상위 구성 요소에 값을 전달합니다. 🎜🎜🎜1. 참조 속성을 사용합니다🎜1. 상위 구성 요소가 하위 구성 요소를 호출할 때 속성 참조를 바인딩합니다.🎜 ;🎜2. 상위 구성 요소에서 this.$refs.parent.property/this.$refs.parent.method를 사용하세요🎜2. 하위 구성 요소는 this.$emit('메소드 이름을 호출합니다. ', 전달 값)🎜2. 상위 구성 요소는 하위 구성 요소에 바인딩된 '메서드 이름'을 통해 전달된 값을 얻습니다. 🎜🎜🎜 (4) vue 페이지 수준 구성 요소 간 값 전송 🎜🎜🎜🎜 vue-router를 사용하여 점프 링크를 통해 매개변수가 있는 매개변수를 전달합니다. 🎜

• 使用本地缓存localStorge。

• 使用vuex数据管理传值。

（5）说说vue的动态组件。

多个组件通过同一个挂载点进行组件的切换，is的值是哪个组件的名称，那么页面就会显示哪个组件。

（6）keep-alive内置组件的作用

可以让当前组件或者路由不经历创建和销毁，而是进行缓存，凡是被keep-alive组件包裹的组件，除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当

(7)递归组件的用法

组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。首先我们要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最终出现“max stack size exceeded”的错误，也就是栈溢出。那么，我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时，组件将不会再进行渲染。

16、怎么定义vue-router的动态路由？怎么获取传过来的值？

动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒号开头，如下：

{
 path: '/details/:id'
 name: 'Details'
 components: Details
}

访问details目录下的所有文件，如果details/a，details/b等，都会映射到Details组件上。

当匹配到/details下的路由时，参数值会被设置到this.$route.params下，所以通过这个属性可以获取动态参数

this.$route.params.id

17、vue-router有哪几种路由守卫?

全局守卫：beforeEach
后置守卫：afterEach
全局解析守卫：beforeResolve
路由独享守卫：beforeEnter

18、$route和 $router的区别是什么？

• $router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。

• $route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。

19、vue-router响应路由参数的变化

• (1)用watch 检测

• (2)组件内导航钩子函数

20、 vue-router 传参

(1)使用Params:

• 只能使用name，不能使用path

• 参数不会显示在路径上

• 浏览器强制刷新参数会被清空

（2）使用Query：

• 参数会显示在路径上，刷新不会被清空

• name 可以使用path路径

21、不用Vuex会带来什么问题？

1、可维护性会下降，你要想修改数据，你得维护三个地方

2、可读性会下降，因为一个组件里的数据，你根本就看不出来是从哪来的

3、增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

22、vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module。

23、、vuex的State特性是？

1、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data
2、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
3、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

24、vuex的Getter特性是？

1、getters 可以对State进行计算操作，它就是Store的计算属性
2、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
3、 如果一个状态只在一个组件内使用，是可以不用getters

25、vuex的Mutation特性是？

1、Action 类似于 mutation，不同在于：
2、Action 提交的是 mutation，而不是直接变更状态。
3、Action 可以包含任意异步操作

26. Vue.js의 ajax 요청 코드를 컴포넌트의 메소드로 작성해야 할까요, 아니면 vuex의 액션으로 작성해야 할까요?

1. 요청한 데이터를 다른 컴포넌트에서 공유하고 요청한 컴포넌트 내에서만 사용하는 경우에는 vuex 상태로 둘 필요가 없습니다.

2. 필요한 경우 재사용을 용이하게 하기 위해 요청을 작업에 넣고 약속 반환으로 패키지한 다음 호출 사이트에서 비동기 대기를 사용하여 반환을 처리하세요. . 이 요청을 재사용하고 싶지 않다면 vue 파일에 직접 작성하는 것이 매우 편리합니다.

27 vue 양방향 데이터 바인딩 원칙인 vue2와 vue3 원칙의 차이점

vue2.0 object.defineProperty는 객체 속성만 하이재킹할 수 있고 배열 첨자의 변경 사항을 모니터링할 수 없기 때문에 데이터 첨자가 발생합니다. 통과 단점은 추가된 요소가 실시간으로 응답할 수 없다는 점입니다. 이 문제를 해결하기 위해 Vue 내부 처리 후 해킹 처리를 위해 push(), pop(), Shift(), unshift(), splice(), sort(), reverse()를 사용할 수 있으므로 다른 배열 속성 아니요, 특정 제한 사항이 있습니다.

object.defineProperty는 객체 속성만 하이재킹할 수 있으므로 각 객체의 각 속성을 탐색해야 합니다. vue2.0에서는 데이터 객체의 재귀 + 순회를 통해 데이터 모니터링이 이루어집니다. 속성 값이 객체인 경우 심층 순회도 필요합니다.

Vue3.0의 프록시는 프록시 객체뿐만 아니라 프록시 배열 및 동적으로 추가된 속성도 수행할 수 있습니다. 13가지 하이재킹 작업이 있습니다. get은 특정 키 값을 가져옵니다(2개의 매개변수, 대상 값 및 대상 값을 받음). 키 값 설정(대상 값, 대상 키 값, 변경될 값, 변경 전 원래 값) 적용 in 연산자를 사용하여 키가 존재하는지 확인합니다. deleteProperty는 속성을 삭제합니다. DefineProperty는 새 속성을 정의합니다.

감사합니다

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 일반적인 Vue 인터뷰 질문 요약(답변 분석 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!