フロントエンド Vue のインタビューで共有すべき 13 の質問 (回答分析付き)

この記事では、フロントエンドの vue 面接での質問をいくつか紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

vue インタビューの質問

1.vue-router がパラメータを渡す方法
2.v- 欠点とif と v-for を一緒に使用する解決策
3.beforeDestroyed で通常どのような操作が実行されるか
4.vue で同じレベルのコンポーネント間で値を転送する方法
5.親の処理方法vue のコンポーネントは子コンポーネントを取得しますか? プロパティとメソッド
6. watch と computed の違い
7. vue の親コンポーネントと子コンポーネントのライフサイクルの順序
8. 親コンポーネントは vue で取得できますか? vue は子コンポーネントのライフサイクルを監視します
9. Vue の主なイベント修飾子は何ですか?それぞれの機能は何ですか?
10. とは何ですか?
11. Watch は配列のポップ動作を監視できますか?
12. Watch はどのように詳細な監視を実装しますか?
13. vue でページが再レンダリングされない問題を解決する方法
(学習ビデオ共有: vue ビデオ チュートリアル )

vue インタビューの質問分析

1. vue-router にはパラメータを渡す 2 つの方法があります

(1) パラメータを動的に渡す (たとえば、router.js でパスを構成する) file: path: ' /detail/:id' を指定し、コンポーネントに this.$route.params.id を渡して

(2) を取得します。ルーターにパラメータ

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

を渡します-link タグを渡し、この .$route.params も渡します。

#注: ここでルーターリンク経由でパラメータを渡す方法は、暗黙的にパラメータを渡すことです

#2、v-if と v -for を併用する場合のデメリットと解決策

v-for は v-if よりも優先度が高いため、ループを通過するたびに v-if が参照されます。 、および v-if が渡される DOM 要素を作成および破棄して要素の表示と非表示を制御するため、要素は常に作成および破棄されるため、ページラグやパフォーマンスの低下が発生します。

解決策: v-for

3 の外側または内側の層で要素をラップして v-if を使用します。 beforeDestroy

では通常どのような操作が実行されますかbeforedestoryed はコンポーネントが破棄される前に実行されるライフサイクルで、コールバック関数やタイマーのクリア、未使用の dom 要素のクリアなどを行うことができます。同じレベルのコンポーネント間の値

#1. 兄弟コンポーネントの場合、中間コンポーネントとして親要素を介して値を転送できます。 2. バスを作成することで、値を転送できます。 be transfer

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

5. vue の親コンポーネントはサブコンポーネントのプロパティとメソッドをどのように取得しますか

Vue は、

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

6. watch と computed

の違い watch の機能は、通常、1 つの値がサブコンポーネントに影響を与えることです。複数の値の変化を監視し、この値の変化を監視できると、コールバック関数が実行されます。この時点で、このコールバック関数で論理処理を行うことができます。

computed は、新しい値を導出するために行われます。依存値に基づいて、複数の依存値が存在する可能性があります。依存値が変更された場合にのみ、計算が再実行されます。[関連する推奨事項:

vue.js チュートリアル

]

7. vue 親コンポーネントと子コンポーネントのライフサイクル シーケンス

1)、レンダリング処理シーケンス:

親コンポーネント beforeCreate() -> 親コンポーネント created() -> 親コンポーネント beforeMount() -> 子コンポーネント beforeCreate () -> サブコンポーネント created() -> サブコンポーネント beforeMount() -> サブコンポーネント Mounted() -> 親コンポーネントmount()2)、更新処理順序:

親コンポーネントの更新処理:

親コンポーネント beforeUpdate() -> 親コンポーネント updated()

子コンポーネントの更新処理:

親コンポーネント beforeUpdate() -> 子コンポーネント beforeUpdate() -> 子コンポーネント updated() -> 親コンポーネント updated()

3)、破棄処理
親コンポーネント beforeDestroy() -> 子コンポーネント beforeDestroy() -> 子コンポーネント destroy () -> 親コンポーネント destroy()

8. Vue の親コンポーネントは、子コンポーネントのライフ サイクル?

親コンポーネントは子コンポーネントを監視できますか? @hook: による監視コードのライフ サイクルは次のとおりです:

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

9. Vue の主なイベント修飾子は何ですか?関数は何ですか?

.stop: イベントのバブリングを防止します

.native: ネイティブ イベントをバインドします

.once: イベントは 1 回だけ実行されます .self: イベントをバインド Onそれ自体は、イベントのバブリングを防ぐのと同じです .prevent: デフォルト イベントの防止

.caption: イベント キャプチャに使用されます

10. キープアライブとは何かを紹介します


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 中国語 Web サイトの他の関連記事を参照してください。