13 front-end Vue interview questions to share (with answer analysis)

This article will share with you some front-end vue interview questions. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

vue interview questions

1.How vue-router passes parameters
2.v- Disadvantages and solutions of using if and v-for together
3.What operations are generally performed in beforeDestroyed
4.How to transfer values ​​​​between components of the same level in vue
5.How do parent components in vue obtain child components? Properties and methods
6.The difference between watch and computed
7.The order of the life cycle of parent component and child component in vue
8.Can the parent component in vue monitor the life cycle of the child component
9. What are the main event modifiers in Vue? What are their respective functions
10. Introduce what is
11.Can watch monitor the pop behavior of the array?
12.How does watch implement deep monitoring
13. How to solve the problem of page not re-rendering in vue
(Learning video sharing: vue video tutorial)

vue interview question analysis

1. vue-router has two ways to pass parameters

(1) Dynamically pass parameters eg by configuring the path in the router.js file: path: ' /detail/:id' and then pass this.$route.params.id in the component to get

(2). Pass the parameter

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

in the router-link tag and also pass this .$route.params gets

Note: The way to pass parameters through router-link here is to pass parameters implicitly

2, v-if and v Disadvantages and solutions of using -for together

Since v-for has a higher priority than v-if, v-if will be visited every time the loop is passed, and v-if is passed Create and destroy DOM elements to control the display and hiding of elements, so elements will be constantly created and destroyed, causing page lag and performance degradation.

Solution: Use v-if by wrapping an element in the outer or inner layer of v-for

3. What operations are generally performed in beforeDestroy

beforedestoryed is a life cycle executed before the component is destroyed. In this life cycle, we can clear callback functions or timers, clear unused dom elements, etc.

4, vue How to transfer values ​​between components at the same level

1. If it is a sibling component, the value can be transferred through the parent element as an intermediate component 2. By creating a bus, the value can be transferred

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

5. How does the parent component in vue obtain the properties and methods of the subcomponent

Vue obtains the properties and methods of the subcomponent by defining the ref attribute on the subcomponent. The code is as follows:

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

6. The difference between watch and computed

The function of watch is usually that one value affects the changes of multiple values ​​and when it can monitor the change of this value, it will execute a Callback function, at this time we can do some logical processing in this callback function

computed is to derive a new value based on the dependent value, and there can be multiple dependent values, only when the dependent value When changes occur, the calculation will be re-executed

[Related recommendations: vue.js tutorial]

7. The life cycle of vue parent components and child components Sequence

1), rendering process sequence:

parent component beforeCreate() -> parent component created() -> parent component beforeMount() -> child component beforeCreate () ->Subcomponent created() -> Subcomponent beforeMount() -> Subcomponent mounted() -> Parent component mounted()

2), update process sequence:

Update process of parent component:
Parent component beforeUpdate() -> Parent component updated()

Update process of child component:
Parent component beforeUpdate() -> Child component beforeUpdate( ) -> Child component updated() -> Parent component updated()

3), destruction process
Parent component beforeDestroy() -> Child component beforeDestroy() -> Child component destroyed () -> Parent component destroyed()

8. Can the parent component in Vue monitor the life cycle of the child component?

Can the parent component monitor the child component? The life cycle of the monitoring code through @hook: is as follows:

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

9. What are the main event modifiers in vue? What are the functions?

.stop: prevent events from bubbling
.native: bind native events
.once: events are executed only once
.self: bind events On itself, it is equivalent to preventing events from bubbling
.prevent: Preventing default events
.caption: Used for event capture

10. Introduce what is keep-alive

keep-alive is used for component caching. It will only be executed once and will not be destroyed. Components wrapped by keep-alive do not have methods such as create and beforeDestroyed, but they have activated and deactivated methods.

11. Can the watch monitor the pop behavior of the array?

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

12、watch如何实现深度监听

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

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

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

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

The above is the detailed content of 13 front-end Vue interview questions to share (with answer analysis). For more information, please follow other related articles on the PHP Chinese website!