Home >Web Front-end >Vue.js >[Compilation and summary] 20 high-frequency Vue interview questions

[Compilation and summary] 20 high-frequency Vue interview questions

青灯夜游
青灯夜游forward
2022-10-17 20:20:272330browse

[Compilation and summary] 20 high-frequency Vue interview questions

As a programmer, if you want to find your favorite job, you will inevitably ask a lot of eight-part essays. Although some of them have nothing to do with work, but you If you want to pass the interview, you must know it. So I recently started to summarize some interview questions, firstly to strengthen my understanding and find a good job, and secondly to help as many friends as possible to quickly master relevant knowledge or successfully pass the interview?

This article introduces some common problems with vue. I try to arrange these questions according to difficulty and relevance to make them easier to transition and understand. Of course, this article is not just as simple as an eight-legged essay, these knowledge points are often used in work. [Related recommendations: vuejs video tutorial]

vue life cycle

This question is generally not asked much, but if it is asked, you must Got to answer

Answer

##beforeCreate-Before instance creationcreated-After the instance is createdbeforeMountonBeforeMountCalled before DOM is mountedmountedonMountedDOM mounting completion callbeforeUpdateonBeforeUpdate Called before data updateupdatedonUpdatedCalled after data updatebeforeDestroyonBeforeUnmountCalled before component destructiondestroyedonUnmountedComponent destruction Complete call

Vue parent-child component life cycle

This is a little more complicated than the previous question. You can try to understand the memory or just remember it directly

Rendering process

FatherbeforeCreate
##Father created
##Father beforeMount
##Child beforeCreate
##child created
Child beforeMount
Child mounted
##Father mounted

Update process

#Father beforeUpdate
Child beforeUpdate
Child updated
##Father updated

Destruction process

#Father beforeDestroy
Child beforeDestroy
Child destroyed
##Father destroyed

NoteIf the child components are asynchronous components, their execution order will change. The life cycle of the parent component will be executed first and then the life cycle of the child component

v-if and v-show

This question is a very basic question and it is easy to understand. Interviews usually ask what the difference between these two instructions is and what the scenario is. Which command is appropriate? Answer

  • v-if indicates whether a dom element is created, and v-showIt is to control whether the display attribute of this dom element is none

  • Generally used in places where the status is frequently switchedv- show,v-if is more suitable for scenarios where conditions do not change frequently, because its switching overhead is relatively large

v-for and v-if priority

This question is asked relatively frequently, although it is not used this way in actual development.

Answer

  • It is generally not recommended to use v-for and v-if in the same tag at the same time during the development process

  • The priority of v-for in Vue2 will be higher, so the loop will be executed first, and then the v-if judgment will be performed, so this will cause the entire element to be traversed first regardless of whether the element needs to be displayed or not. List

  • In Vue3, the priority of v-if will be higher, but when we traverse an array, the v-if judgment will be based on an element in the array. An error will be reported because v-if will be executed first and the array has not been obtained at this time. Therefore, it is still not recommended to use this in Vue3.

Let’s talk about computed and watch

computed and watch are used more in actual work, so I ask There are quite a lot of them, and you can basically answer them if you understand them

  • computed is a calculated attribute, which can be used when an attribute is affected by one or more attributes. .watch is a listener. When we need to do some processing based on changes in an attribute, we can use watch to monitor this attribute

  • computed has the characteristics of caching, that is, it will only re-execute the internal logic when the properties it depends on change. The following code

<template>
    <div>{{ addSum }}</div>
    <div>{{ addSum }}</div>
    <div>{{ addSum }}</div>
</template>
<script setup>
import { computed, ref, watch } from "vue";
const a = ref(1)
const b = ref(2)
let addSum = computed(() => {
    console.log('内部逻辑执行')
    return a.value + b.value
})
</script>

The page is used multiple timesaddSum, but "internal logic execution" will only be printed once

  • watchdefaults when the page is first loaded It will not be executed. You need to set immediate:trueThe monitoring will be executed for the first time.

  • watchBy default, only one layer of data is monitored, and multiple layers are not monitored. Changes in attributes in the data need to be set to deep:true to perform deep monitoring

##vue-router

About

vue-routerThere are many questions you can ask, such as its implementation principle, route jump, route guard, etc., so it is recommended to check the systemvue-routerDocumentation

Question 1: What is vue-router, describe its principle?

Vue Router is the official routing manager of Vue. It has two modes: hash and history.

hash mode is through monitoring hashchange Events are used to update part of the page content. The url will be followed by #. The

history mode is done by listening to the popstate event. The operating principle of updating part of the page content is similar to the hash mode, except that # will not appear after the url, which will make it more beautiful. At the same time, it will bring a problem. Because there is no # number, when the user refreshes the page, a request will be sent to the server, resulting in a 404 request for the resource. Therefore, a configuration of nginx is required. Redirect all routes to the root page

Question 2: What are the routing jump methods?

  • Built-in component jump

  • router.push({ path: '/home' }) ,router.replace({ path: '/home' })

Question 3: Tell us about routing guards?

Route guards are divided into

Global route guards, Route exclusive guards, Component route guards

    Global route guard
  • ##beforeEach

    , receives to, from, next three parameters, before each route jumps will be triggered.

  • beforeResolve

    is more commonly used during login verification. It is similar to beforeEach. The difference is that before the navigation is confirmed, at the same time

  • afterEach is called after the guards and asynchronous routing components in all components are parsed, and is called after the routing jump is completed, receiving two parameters to and from
Route exclusive guard
  • ##beforeEnter
, generally configured in the routing configuration file (router/index.js), related to before entering a certain route operate

  • 组件路由守卫

接收to、from、next三个参数

  • beforeRouteEnter,进入该组件之前调用,无法获取到vue实例

  • beforeRouteUpdate,在当前路由改变,但是该组件被复用时调用

  • beforeRouteLeave, 在离开当前组件时调用

vue2和vue3区别

当面试问你会用vue3吗,如果你回答会用的话,那么大概率会问vue2和vue3有哪些区别,最近我去面试的时候百分之90都问了这个问题。

回答

  • 写法上的区别:vue2使用的是options(选项)Api,vue3的是composition Api(当然vue3也兼容composition api)。options Apimethods,compute,data等api都是分散的。而composition api中的代码是根据逻辑功能来组织的,我们可以将一个功能所定义的methods,compute,data等api会放在一起,让我们可以更灵活地组合组件逻辑。

  • vue2将响应式数据放到data函数中,而vue3则是使用refreactive将数据声明为响应式

  • 响应式实现方式:vue2中是通过Object.defineProperty对数据劫持实现的,vue3中则是使用Proxy对数据代理实现的。

  • 生命周期区别:vue3中将beforeCreatecreated合并到了setup函数中

  • 根节点: vue3组件允许多个根节点,而vue2只允许一个

  • 内置组件: vue3新增了传送组件Teleport和异步依赖处理组件Suspense

vue插件使用

面试一般会问你如何写一个vue插件,所以没写过vue插件的最好去亲自体验一下

回答:

vue实例会有一个use函数,它接受的是一个带有install函数的对象和一个可选的选项对象,当我们使用 vue.use(plugin)或者app.use(plugin)会调用我们插件的install属性的函数,并且将当前组件的实例传进来.所以在插件中就可以对这个实例进行一些操作来实现我们插件的功能

vue插槽

插槽slot可以理解为占坑,当使用一个组件的时候,在组件标签里的对应的内容就会替换掉这个组件中的slot标签。

插槽分为默认插槽具名插槽作用域插槽

默认插槽子组件中用slot标签来确定渲染位置,父组件使用它时直接在子组件的标签内写入内容即可

//子组件
<template>
    <slot />
</template>

//父组件
<Child>
  <div>默认插槽</div>  
</Child>

具名插槽

顾名思义就是具有名字的插槽,子组件中可以用name熟悉对slot命名,父组件在使用的时候通过template中的v-slot:name或者#name来定义这个插槽中的内容

//子组件
<template>
  <slot name="content"></slot>
</template>

//父组件
<Child>
    <template v-slot:content>具名插槽内容</template>
</Child>

作用域插槽

子组件中的slot可以通过类似组件属性传递的方式将子组件的值传递给父组件中这个子组件的插槽内容中(子组件标签内),在父组件使用子组件的时候要用v-slot的值进行接收这些参数,默认插槽可以将其直接写在子组件标签上,具名插槽则写在template上。而传过来的值只能在子组件标签中或者template标签中使用。所以在父组件作用域中获取到了子组件作用域中的变量,可以认为作用域插槽延伸了子组件数据的作用范围,因此叫做作用域插槽

如果你想详细理解插槽的作用可以阅读这篇文章Vue3中插槽(slot)用法汇总 - 掘金 (juejin.cn)

组件通信

这里我大概归纳了一下vue2和vue3的传参方式

Vue2(optional API) Vue3(setup) Description
##Brother Component passing valueEventBusmitt

它们的具体用法可以参考我的这篇文章盘点Vue2和Vue3的10种组件通信方式(值得收藏) - 掘金 (juejin.cn)

除了上面的传参方式你也可以回答Vuex和Pinia,前提你了解这两个状态管理器,因为你说了大概率下个问题就会问你Vuex和Pinia

vuex

面试问到这个问题的时候,不要上来就开始说什么state,mutation...。你要先阐述Vuex干嘛用的,什么时候需要用Vuex。

回答

  • Vuex是Vue中的全局状态管理框架,它可以管理应用的所有组件的状态。并不是每个项目都需要引入Vuex的,当我们的项目有很多个页面,并且这些页面共享着多个数据状态,此时我们可以引入Vuex。

  • Vuex有三个核心的概念,state,mutations,actions,其中state为存放数据的地方,mutations中的函数作用则是用来修改stateactions中一般是用了处理一些异步操作的函数。

  • Vuex除了上面三个概念还有getters,moudlesgetters就像Vue中的计算属性computed一样用来描述依赖响应式状态state中的复杂逻辑。moudles则是可以将store分割成模块(module),每个模块都拥有自己的state,mutations,actions等,在大型应用中经常用到

  • 场景:当我们异步获取结果并赋值给state的时候,比如数据请求,我们可以在actions中进行数据请求,拿到结果通过它的dispatch方法调用mutations中修改state的函数,从而将结果赋值给了state

pinia

这个现在问的好像不多,从我最近面试来看只有我提到了才会问一下,但是以后问的肯定会越来越多。关于pinia问的一般是它和Vuex的区别,确切的说应该是它和Vuex4之间的区别

回答

pinia其实就是Vuex5,它和Vuex的主要区别有以下几点

  • Pinia使用更简单,更符合开发者的开发习惯

  • pinia中没有了mutations,状态state的修改可以直接进行修改,或者在actions中修改,或者使用它的$patch方法进行修改

  • pinia中没有了modules,如果想使用多个store,直接使用defineStore定义多个store传入不同的id即可

  • 更好的TS支持,不需要创建自定义的复杂包装器来支持TS

vue自定义指令

vue 官方提供了v-text、v-for、v-model、v-if 等常用的指令。除此之外vue 还允许开发者自定义指令。面试经常会问什么是自定义指令?你用自定义指令做过哪些功能?

回答1:什么是自定义指令?

  • 自定义指令包含局部指令和全局指令,在模板中使用指令前必须先使用directives选项注册。局部指令指在某个组件中注册,而全局则是将指令注册到全局,通常在main.js中注册。

  • 自定义指令由一个包含类似组件生命周期钩子的对象来定义。它的生命周期钩子包含created,beforeMount,mounted,beforeUpdate,updated,beforeUnmount,unmounted,

  • 常用的钩子为mounted 和 updated,它接受el,binding等参数.binding参数的值一般包含绑定到这个元素上的信息,比如下面这个指令

<div v-example:foo.bar="baz">

它的binding会是这个对象

 {
    arg: 'foo',
    modifiers: { bar: true },
    value: /* `baz` 的值 */,
    oldValue: /* 上一次更新时 `baz` 的值 */ 
 }

回答2:你用自定义指令做过哪些功能?

  • 数据埋点,通过绑定自定义事件传入点击当前元素需要埋点的事件名,在指令中监听当前元素的点击事件后调用后台接口将事件名传入

  • 权限控制,通过绑定自定义事件传入控制当前元素的权限字段,在指令中获取到当前元素根据权限字段来控制该元素的状态(显示,隐藏等)

  • ...

keep-alive

官网描述

<KeepAlive> is a built-in component whose function is to cache removed component instances when dynamically switching between multiple components.

Answer

  • Usually when we switch components, the previous component will be destroyed, and when we use <KeepAlive>If you wrap it, the component will be cached, and the previous state will be retained when the component is displayed again.

  • keep-aliveReceives two attributes include and exclude, which respectively represent which components need to be cached and which No caching is required. It receives the component name array, string or regular expression. It can be used when we use dynamic components component or routes router-view

  • keep-alive also receives the max attribute indicating the maximum number of cache instances. If this number is exceeded, the cache instance that has not been accessed for the longest time will be destroyed.

  • keep-alive has two life cycles, namely activated and deactivated, activatedThe hook will be called when it is mounted for the first time or every time it is reinserted from the cache. deactivatedThe hook is called when the component is removed from the DOM or the component is uninstalled

vue2 Mixin-Mixin

There is no longer the concept of Mixin in vue3, so the chance of being asked will become smaller and smaller in the future, but the frequency of being asked is still very high. Generally speaking, you will learn about its concept, advantages and disadvantages, and sometimes you will also ask about the life cycle execution order of it and the parent component

vue official website description:

Mixin provides a very Flexible way to distribute reusable functionality in Vue components. A mixin can contain arbitrary component options. When a component uses a mixin, all of the mixin's options will be "mixed" into the options of the component itself.

Answer1.Mixin's function is to extract the public logic of the component. When which component needs to be used, directly mix the extracted part into Just inside the component 2. The life cycle of Mixin will be executed before the life cycle of the parent component. If the properties or methods in Mixin conflict with the parent component, the properties or methods in the parent component will be used. 2. Advantages: It can reduce code redundancy and improve logic reusability. 3. Disadvantages: Naming conflicts are easy, it is difficult to trace the source, and later troubleshooting is inconvenient

vue responsiveness principle

This question is asked very frequently, so This question has been asked in almost all the interviews I have experienced, and it is an opening question in Vue.

The following is my own understanding answer, taking vue2 as an example, you can refer to it

  • ##The responsive principle of vue is based on

    Object.definePropertyThis API is used to hijack data and implement it in conjunction with the publisher-subscriber model.

  • will first use

    get## in Object.defineProperty #Function to access and hijack all attributes of data in vue, which involves hijacking deeper attributes in data and requires recursively calling the hijacking method. This is implemented through a Observer class

  • After hijacking each attribute, multiple subscribers will be bound to this attribute
  • watcher

    , Because an attribute may be used in many places; and this watcher contains the function update that updates the view. The corresponding relationship between

  • watcher

    and the attribute and the connection with the view are realized by compiling the template Compile class. Compile will get the entire dom object, and then traverse the element child nodes to obtain the data attribute in vue, then directly add a watcher to the attribute and give it some updates to the current view. Method.

  • Multiple subscribers of each attribute
  • watcher

    will be added to the corresponding array, here it is through the Deps class Implemented, when initializing watcher, the addSub method in Deps will be called to add the Subs# of this class corresponding to watcher ##In the array

    When a property in data changes, the
  • set
  • function in

    Object.defineProperty will be triggered. This The notify function in the Deps class of the property will be called to traverse the subscribers watcher in the Subs array and call its functionupdateTo trigger the update of the view

  • The difference between Object.defineProperty and proxy

Generally, you may ask after asking about the principle of responsiveness The difference between the two

Answer

##Object.defineProperty
    can only proxy properties,
  • Proxy

    The proxy is the object. New properties are added to the object,

    Proxy
  • can monitor it, but
  • Object.defineProperty

    cannot.

  • Object.defineProperty 的代理行为是在破坏原对象的基础上实现的,Proxy 则不会破坏原对象,只是在原对象上覆盖了一层。

  • 数组新增修改,Proxy可以监听到,Object.defineProperty不能。

  • Proxy不兼容IE11及以下

vue3内置组件

vue3新增了两个内置组件分别是TeleportSuspense

  • Teleport组件

可以称之为传送门,作用将其插槽内容渲染到 DOM 中的另一个位置,接收两个参数to(要去的位置)和disabled(是否留在原位置)。接收比如下面代码

<teleport to="#popup"> 
    <video src="./my-movie.mp4"> 
</teleport>

video将会被传送到id为popup的元素下。

  • Suspense组件
  • <Suspense> 组件用于协调对组件树中嵌套的异步依赖的处理。

  • 它一般用于包裹多个异步组件处理多个异步组件加载前与完成后的统一状态

  • <Suspense> 组件有两个插槽:#default 和 #fallback,在初始渲染时,<Suspense> 将在内存中渲染其默认的插槽内容。如果在这个过程中遇到任何异步依赖,则会进入挂起状态等待异步组件加载完毕。在挂起状态期间,展示的是 #fallback插槽内容

nextTick及原理

关于nextTick会问到它的用法,然后是它的原理,然后还可能问到JS的时间循环机制。

问题1:vue中的nextTick是干什么用的?

这个其实比较简单,用过都知道它是干嘛的,vue官方的解释是:

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

这是什么意思呢,其实vue中修改data不会立刻触发dom更新;而是把需要更新的Watcher加入到queueWatcher队列中,然后在合适的时机在nextTick中调用这些Watcher的更新函数进行dom更新,所以在data刚被修改的时候,我们是获取不到更新后的dom的,这时候便需要调用nextTick函数在它的回调函数中获取到变化后的dom

问题2:nextTick原理

  • nextTick原理是借助浏览器事件循环来完成的,因为每次事件循环之间都有一次视图渲染,nextTick尽量在视图渲染之前完成dom更新,所以nextTick优先使用的是promise(微任务)实现

  • 每次执行nextTick时会将传入的回调函数放入一个队列中(callbacks数组),然后当在本次事件循环的同步代码执行完毕后开启一个微任务(promise或者MutationObserver)去依次执行这个callbacks中的回调函数。

  • 但是当浏览器不支持promise的时候在vue2中会进行进行降级处理,依次使用setImmediatesetTimeout开启一个宏任务执行callbacks

  • 当一个data数据更新时对应的watcher便会调用一次nextTick,将它对应的dom更新操作作为回调函数放入callbacks中,所以当我们想获取这个data更新后的dom需要在其值变化后也调用nextTick将回调函数传入排在上个更新dom的回调函数后面,所以我们可以在这个nextTick的回调函数中获取到更新后的data

问题3:js事件循环机制

不属于vue,后面文章再介绍

vue虚拟dom,diff算法

这题在工作中有用吗是???答案是没有用,但是在面试中有用啊,所以我们要会回答?

问题1:什么是虚拟dom?

简单来说就是一个描述dom结构的js对象

问题2:为什么要用虚拟dom?

  • 每当我们用原生JS或者JQ操作DOM时,浏览器会从头开始进行DOM树的构建,频繁的操作DOM开销是很大的。

  • 而虚拟DOM就是为了减少这些操作的,虚拟DOM首先会通过状态生成一个虚拟节点树(js对象),然后使用虚拟节点树进行渲染。当某些状态发生变更时会生成新的虚拟DOM节点树,然后与上一次虚拟DOM节点树进行比较(diff),从而找到差异的部分,最后渲染到真实的DOM节点上面

问题3:说一下diff算法

The essence of the diff algorithm is to find the difference between two objects, with the purpose of reusing nodes as much as possible. In vue, it is an algorithm used to calculate the difference between the virtual DOM after the change and the virtual DOM before the change when the state changes.

The specific implementation cannot be explained clearly in a few sentences. I recommend an article

Let’s talk about Vue’s double-ended diff algorithm - Nuggets (juejin.cn)

Conclusion

The above questions are basically summarized by consulting some information and combining with my own understanding, so it is inevitable that there will be some errors and inadequacies. If you find them, I hope you will feel free to point them out. Many thanks.

(Learning video sharing:

web front-end development, Basic programming video)

Method Vue2 Vue3
Father to son props props
From son to father $emit emits
Father to Son $attrs attrs
Son to Father $listeners None (merged into attrs mode)
father-to-child provide/inject provide/inject
Child component accesses parent component $parent None
Parent component accesses child component $children None
Parent component accesses child component $ref expose&ref

The above is the detailed content of [Compilation and summary] 20 high-frequency Vue interview questions. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:juejin.cn. If there is any infringement, please contact admin@php.cn delete
Previous article:Let’s talk about the memory problem of keepalive in VueNext article:Let’s talk about the memory problem of keepalive in Vue

Related articles

See more