공유할 프런트엔드 Vue 인터뷰 질문 13개(답변 분석 포함)

이 글에서는 프론트엔드 vue면접 질문 몇 가지를 공유하겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

vue 인터뷰 질문

1. vue-router가 매개변수를 전달하는 방법
2. v-if와 v-for를 함께 사용할 때의 단점과 해결책
3. . vue에서 동일한 레벨의 컴포넌트 간 값을 전송하는 방법
5. vue에서 상위 컴포넌트에서 하위 컴포넌트의 속성 및 메서드를 가져오는 방법
6. watch와 계산의 차이점
7. 생명의 순서 vue의 상위 및 하위 구성요소 주기
8. in vue 상위 구성요소가 하위 구성요소의 수명 주기를 모니터링할 수 있나요? 9. vue의 주요 이벤트 수정자는 무엇인가요? 각각의 기능은 무엇입니까
10. 가 무엇인지 소개하세요
11. 시계는 어레이의 팝 동작을 모니터링할 수 있나요?
12. 시계는 어떻게 딥 모니터링을 구현하나요? vue에서 페이지가 다시 렌더링되지 않음 질문
(동영상 공유 학습:
vue 비디오 튜토리얼
)

vue 인터뷰 질문 분석

1. vue-router에는 매개변수를 전달하는 두 가지 방법이 있습니다

(1) 경로가 구성된 router.js 파일을 통해 매개변수를 동적으로 전달합니다(예: path: '/detail/:id'). 그런 다음 구성 요소

(2)의 this.$route.params.id를 통해 가져옵니다. 라우터 링크 태그의 매개변수

<router-link :to={
params: {
	x: 1
	}
} />

또한 this.$route.params

를 통해 얻습니다. 참고: 여기서 라우터 링크를 통해 매개변수를 전달하는 방법은 암시적 매개변수 전달입니다

2. v-if와 v-for를 함께

v-for는 v-if보다 우선순위가 높기 때문에 반복할 때마다 v-if로 이동하며 v-if는 요소를 생성하고 숨기는 방식으로 요소의 표시 및 숨기기를 제어합니다. DOM 요소를 파괴하므로 계속해서 요소를 생성하고 파괴하면 페이지 지연과 성능 저하가 발생합니다.

해결책: v-if

3를 사용하려면 v-for의 외부 또는 내부 레이어에 요소를 래핑합니다. beforeDestroy

beforedestoryed에서 일반적으로 수행되는 작업은 구성 요소가 파괴되기 전에 실행되는 수명 주기입니다. this 수명 주기 동안 콜백 함수나 타이머를 지우고, 사용하지 않는 DOM 요소를 지울 수 있습니다. 4. 동일한 레벨의 Vue 구성 요소 간에 값을 전송하는 방법

1. 형제 구성 요소인 경우 상위 요소로 사용할 수 있습니다. 중간 구성 요소는 값 2를 전달합니다. 버스를 생성하여 값을 전달합니다

// 创建一个文件，定义bus中间件，并导出
const bus = new Vue()
// 在一个组件中发送事件
bus.$emit('事件名称', 传递的参数)
// 在另一个组件中监听事件
bus.$on('事件名称', 得到传过来的参数)

5. vue의 상위 구성 요소는 하위 구성 요소의 속성과 메서드를 어떻게 얻습니까? Vue는 다음을 통해 하위 구성 요소를 얻습니다. 하위 구성 요소 속성 및 메서드에 ref 속성을 정의하는 코드는 다음과 같습니다.

// 这里是父组件
<templete>
	<child ref="child"/>
</templete>
<script>
method: {
	getChild () {
		this.$refs.child.属性名（方法名）
	}
}
</script>

6. Watch와 계산의 차이점

watch의 기능은 일반적으로 하나의 값이 여러 값의 변경에 영향을 미치고 이 값의 변경을 모니터링할 수 있으면 콜백 함수를 실행합니다. 이때 이 콜백 함수에서 몇 가지 논리적 처리를 수행할 수 있습니다.

계산은 종속 값을 기반으로 새 값을 파생하는 것이며 여러 개가 있을 수 있습니다. 종속 값이 변경된 경우에만 계산을 다시 실행합니다.

[관련 권장 사항:

vue.js 튜토리얼 ]

7 vue 상위 구성 요소와 하위 구성 요소의 수명 주기 순서

1) 렌더링 프로세스 순서:

부모 컴포넌트 beforeCreate() -> 부모 컴포넌트 beforeMount() -> 자식 컴포넌트 beforeCreate() -> ; 하위 구성요소 beforeMount() -> 상위 구성요소 탑재()

2), 업데이트 프로세스 순서:

상위 구성요소 업데이트 프로세스: 상위 구성요소 beforeUpdate() -> ()

하위 구성 요소 업데이트 프로세스:

상위 구성 요소 beforeUpdate() -> 하위 구성 요소 업데이트() -> 상위 구성 요소 업데이트()

3), 상위 구성 요소 beforeDestroy () -> 하위 구성 요소 beforeDestroy() -> 상위 구성 요소 파괴()

8. Vue의 상위 구성 요소가 하위 구성 요소의 수명 주기를 모니터링할 수 있나요? 상위 구성 요소는 하위 구성 요소의 수명 주기를 모니터링할 수 있습니다. @hook:

// 这里是父组件
<template>
	<child
	@hook:mounted="getChildMounted"
	/>
</template>
<script>
method: {
	getChildMounted () {
		// 这里可以获取到子组件mounted的信息
	}
}
</script>

9. Vue의 주요 이벤트 수정자는 무엇인가요? 기능은 무엇인가요?

.stop: 이벤트가 버블링되는 것을 방지합니다.
.native: 기본 이벤트를 바인딩합니다.

.once: 이벤트는 한 번만 실행됩니다.

.self: 이벤트를 자체적으로 바인딩합니다. event from bubble . 방지: 기본 이벤트 방지 .caption: 이벤트 캡처에 사용됨

10. keep-alive가 무엇인지 소개합니다

keep-alive는 구성 요소 캐싱에 사용되며 한 번만 실행되지 않습니다. 파괴될. Keep-alive로 래핑된 구성 요소에는 create, beforeDestroyed 등의 메서드가 없지만 활성화 및 비활성화된 메서드가 있습니다.

11. 시계가 어레이의 팝 동작을 모니터링할 수 있나요?

对于有返回值的数据，watch就能监听到，比如数组的pop，push, unshift,map等行为。

12、watch如何实现深度监听

watch: {
	obj: {
		handler: function(val) {
		},
		deep: true // 深度监听
	}
}

13、vue中如何解决页面不重新渲染问题

(1).修改对象属性后页面未重新渲染可以使用 this.$set(对象名称, '属性名', '属性值') (2).使用this.$forceUpdate()方法可重新渲染页面

更多编程相关知识，请访问：编程视频！！

위 내용은 공유할 프런트엔드 Vue 인터뷰 질문 13개(답변 분석 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!