总结了一下vue3相关的面试题

更新日期: 2024-03-21阅读: 574标签: 面试
总结了一下vue3相关的面试题,方便复习。选题原则:剔除了即将过时的内容,比如option API、getCurrentInstance()、setup()函数形式的写法、mixin代码复用、通过app.config.gloh4alProperties注册全局变量。


目录

  1. vue3的编译流程?
  2. vue3内的宏是什么?
  3. <script setup/>的实现原理?
  4. 组件实例是什么?
  5. 启动程序的时候,vue3单文件组件的初始化流程?
  6. createApp(),mount()做了什么工作?
  7. 组件的生命周期?
  8. 什么是虚拟DOM?diff算法?就地复用?
  9. 任务调度系统?
  10. 异步刷新是什么?怎么实现的?
  11. nextTick()的实现原理?
  12. 有哪三种Effect?作用?
  13. watch(),watchEffect(),computed()的区别?
  14. 响应式编程的实现原理?
  15. ref()和reactive()的区别?
  16. ref()和ref(null)的区别?
  17. attrs和props的区别?
  18. provide和inject实现原理?
  19. emit()的实现原理?
  20. 单向数据流的原因?
  21. 模板的编译流程?在什么时候编译?
  22. 组件的注册是什么?
  23. 指令的实现原理?
  24. 各种指令的区别和作用?
  25. v-for为什么要加key?v-for为什么不能和v-if一起使用?
  26. v-model的实现原理?
  27. hook是什么?
  28. 插件是什么?实现原理?
  29. 什么是异步组件?实现原理?
  30. 前端路由是什么?什么是路由懒加载?

问题

(1)vue3编译流程?

vue3的编译分两部分:编译期和运行期。编译期间,先通过vue-loader把单文件组件编译成符合原生JavaScript语法的模块;运行期间,会通过内置的模板引擎对模板进行编译,生成render()函数,且按照先父组件后子组件的顺序对模板进行编译。


(2)vue3内的宏是什么?和语法糖的区别?

按照vue3官方的说法,defineProps() 、defineEmits()、defineExpose()都是宏,它们使用形式上和函数调用差不多,区别是,第一,这些宏不需要通过模块导入;第二,这些宏会在编译期被编译成符合JavaScript原生语法的代码。语法糖也会被编译成符合JavaScript原生语法的代码,vue3官方对这两者进行区分是因为,语法糖创建的是不曾有过的语法,而宏指的是给现有语法新的含义。


(3)script setup的实现原理?

<script setup/>本质是setup()函数的语法糖,vue-loader在编译期间会把<script setup/>内的代码编译成setup()函数,把defineExpose()内指定的变量编译为setup()函数的返回值。


(4)组件实例是什么?

每个单文件组件都有一个组件实例,组件实例是用来存放组件状态的,可以在setup()函数内,通过getCurrentInstance()获取组件实例。


(5)启动程序的时候,vue3单文件组件的初始化流程?

单文件组件由组件实例、相应vnode、相应node三部分组成。初始化的时候,先创建组件的实例;接着用父组件vnode初始化实例的props、attrs、slots成员;然后执行setup()函数;接着把模板编译成render()函数;接着创建vnode;如果当前组件有子组件,则切换到子组件,重复上面的步骤;子组件都初始化完成后,把vnode同步到node上。


(6)createApp(),mount()做了什么工作?

程序在初始化的时候会依次调用createApp()和mount()函数,createApp()负责执行平台相关的代码,mount()负责执行平台无关的代码。createApp()主要做了两件事,第一,创建一个渲染器,它可用于把vdom转化为平台相关的界面代码;第二,返回一个App实例。mount()的作用就是,创建组件实例、vdom、完成依赖收集、并通过渲染器把vdom渲染成平台相关的界面代码。


(7)组件的生命周期?

单个组件的生命周期:初始化阶段,先执行setup函数初始化实例,接着执行onBeforeMount,最后执行onMounted;运行阶段,先执行onBeforeUpdate,再执行onUpdated;关闭阶段,先执行onBeforeUnmount,再执行onMounted。父子组件的生命周期:初始化阶段,先执行父组件的onBeforeMount,然后执行子组件的onBeforeMount,接着执行子组件的onMounted,最后执行父组件的onMounted;运行阶段、关闭阶段同理可推。


(8)什么是虚拟DOM?diff算法?

虚拟dom是用JavaScript语言描述的一个树形结构,用于缓存发生变化的响应式数据,当到达下次刷新周期的时候,一次性把所有发生变化的数据同步到实际dom上。diff算法是同步vdom和dom数据的算法,采用就地复用的策略实现高效同步。


(9)任务调度系统?

vue3内部维持了3类队列:pre队列——组件更新前置任务队列;queue队列——组件更新时的任务队列;post队列——组件更新后置任务队列。vue3内所有异步任务都会被推进这些队列,当本次宏任务执行结束的时候,会执行一个名为flushJoh4的微任务,该微任务会按照pre>queue>post的优先级,依次执行每个队列中的函数。


(10)异步刷新是什么?怎么实现的?

异步刷新指的是在响应式数据发生更改后,只更新vdom,不立即更新dom,当下一个刷新周期到来的时候,次性把所有发生变化的数据同步到实际dom上。异步刷新是通过joh4队列+Promise+diff算法实现的,当响应式数据发生更改时候,会立即更新vdom上的数据,待下个刷新周期到来的前,开始执行flushJoh4微任务,flushJoh4会通过diff算法完成vdom和dom之间的数据同步。


(11)nextTick()的实现原理?

nextTick()作用是,让回调函数在下一次刷新DOM的时候,具体来说在onUpdated后执行。vue3内的nextTick()是通过Promise实现,当微任务flushJoh4把Joh4队列中的所有函数都执行完了后,nextTick()回调会被推入微任务队列,然后开始执行。


(12)有哪三种Effect?作用?

vue3组件内有3类Effect:computedEffect、watchEffect、renderEffect。正是通过这些Effect才实现数据可监听函数的绑定,其中computedEffect、watchEffect在setup()期间创建,而renderEffect在onBeforeMount和onMounted之间创建。


(13)watch(),watchEffect(),computed()的区别?

三者都用于实现数据和监听函数的绑定。原理上来说,三者的共同点是,都会在setup期间、即onBeforeMount之前,创建一个Effect对象,并执行依赖收集函数进行依赖收集。区别是,第一,watchEffect、computed的依赖收集函数和监听函数是同一个函数,而watch的依赖收集函数和回调函数是两个函数,这就导致了watchEffect和computed参数中的监听函数会在程序初始化期间执行一次,而watch参数中的监听函数默认不会执行;第二,computed参数中的监听函数在变量发生变化后立即执行,watchEffect、watch参数中的监听函数执行时机可由用户指定,可以立即执行,也可以异步执行。


(14)响应式编程的实现原理?

响应式编程的核心是通过发布订阅模式、Effect对象、重写get函数实现的。发布订阅模式实现数据和监听函数的绑定,Effect对象内封装有监听函数和调度策略,get函数则负责进行依赖收集和返回数据。


(15)ref()和reactive()的区别?

两者都用于实现响应式变量,区别在于reactive()只可以封装引用类型,ref()可以封装任意类型;reactive()通过Proxy实现,ref()通过类封装,并重写get/set实现。就目前而言,要访问ref()封装的变量,需要通过value函数获取。


(16)ref()和ref(null)的区别?

ref()的作用是封装普通数据,实现响应式数据;ref(null)的作用是获取子组件实例。


(17)attrs和props的区别?

attrs和props的作用都是,以模板属性的形式,从父组件传递数据给子组件。区别是,子组件中获取从父组件传过来的props数据,首先需要用defineProps()声明,而获取attrs数据不需要声明。props的优势是增加了代码可读性,attrs的优势是传值更灵活、代码更简洁。


(18)provide()和inject()实现原理?

在祖先组件里通过provide()提供的数据,可以在任意子孙组件里通过inject()获取。它是通过原型链实现的。


(19)emit()的实现原理?

emit()是通过发布订阅模式实现的,子组件发送一个事件,父组件收到该事件会立即执行相应的函数。


(20)单向数据流的原因?

单向数据流指的是在 vue中约定,父组件传递给子组件的数据只能单向流动。也就是说,当一个父组件将其数据传递给一个子组件时,子组件不能直接修改该数据,而是需要通过向父组件发送事件来请求更改该数据。这种单向数据流的方式可以确保应用程序的数据流向清晰明确,易于理解和维护。


(21)模板的编译流程?在什么时候编译?

模板会先被解析成AST对象,然后通过遍历AST对象生成渲染函数。这个过程发生在setup()函数执行结束后、onBeforeMount之前。


(22)组件注册是什么?

若要在vue内使用自定义组件,需要先注册组件。组件注册可以看作是一种声明,用于告诉编译器,某个标签名是组件。组件注册分为局部注册和全局注册,全局注册的组件可以在整个程序内使用,局部注册的组件只可以在特定组件内使用。


(23)指令的实现原理?

vue3内的指令是,本质上是一系列钩子函数的集合,可以为这些钩子函数指定执行时机,包括:onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount和onUnmounted。


(24)各种指令的区别和作用?

v-show和v-if的区别:v-show=false的组件会被创建,但是不会显示;v-if=false的组件不会被创建。v-on和v-h4ind的区别:v-on用于绑定事件和事件处理函数;v-h4ind用于绑定变量。v-text,v-html和插值表达式的区别:插值表达式存在闪屏的问题,而v-text 、v-html不存在该问题;插值表达式和v-text都会直接以字符串的形式显示html,v-html则可以渲染html标签对。


(25)v-for为什么要加key?v-for为什么不能和v-if一起使用?

v-for要加key是因为,第一,vue的同步算法采用就地复用的策略,在没有key值的情况下,diff算法认为标签类型相同的元素可以进行复用;有key值的情况下,diff算法认为标签类型相同且key值相等的元素才可以复用。第二,vue只在v-model实现了数据双向绑定,其它地方实现的都是单向绑定,<input/>框内的文字发生变化,不会实时同步到数据上。在vue3中,v-if的优先级高于v-for,导致v-if访问不了v-for中的变量,因此不能把 v-if 和 v-for 同时用在同一个元素上。


(26)v-model的实现原理?

v-model实现了数据的双向绑定,它是通过响应式数据+监听输入框事件实现的。


(27)hook是什么?

hook是一种编程封装思想,通过闭包实现,早在ES6诞生之前,这种编程封装思想在JavaScript中应用广泛,只不过在React17出现后,React官方把这种思想命名为hook,vue3借鉴react命名,也把这种封装思想称作hook。


(28)vue3插件是什么?

vue3内的所谓的插件不是常规意义上的插件,而是指mount()前执行的初始化函数,vue插件通常用来为 vue 添加全局功能。vue3内通过use()函数引入插件,use()的作用就是执行参数对象内的install()函数。


(29)什么是异步组件?

网页的渲染流程一般分两部,先从网络加载网页,然后渲染。异步组件指的是,首次加载和渲染网页的时候,不从网络上加载该组件对应的JavaScript文件,而是等到需要显示该组件的时候,再从网络上加载该组件并渲染显示出来。


(30)前端路由是什么?什么是路由懒加载?

路由能够根据不同的URL地址返回给用户不同的内容或页面,如果路由位于浏览器端,就是前端路由;如果路由位于服务器端,就是后端路由。对于SPA单页应用,打包构建时,JavaScript包会变得非常大,会使得页面首次加载的时间变长 。若将不同路由对应的组件分割成不同的文件,然后当路由被访问的时候才从服务器加载对应文件,这就是路由的懒加载。

作者:Zeh4ulon
原文链接:https://zhuanlan.zhihu.com/p/637975012

链接: https://www.fly63.com/article/detial/12694

Web前端年后跳槽面试复习指南

很多童鞋可能年后有自己的一些计划,比如换份工作环境,比如对职业目标有了新的打算。当然面试这一关不得不过,大概又不可能系统性的复习,这里罗列一些 重点 面试的知识点和文章,

前端面试之webpack面试常见问题

什么是webpack和grunt和gulp有什么不同?什么是bundle,什么是chunk,什么是module?什么是Loader?什么是Plugin?如何可以自动生成webpack配置?webpack-dev-server和http服务器如nginx有什么区别?

每个 JavaScript 工程师都应当知道的 10 个面试题

多问问应聘者高层次的知识点,如果能讲清楚这些概念,就说明即使应聘者没怎么接触过 JavaScript,也能够在短短几个星期之内就把语言细节和语法之类的东西弄清楚。

37个JavaScript基本面试问题和解答

面试比棘手的技术问题要多,这篇文章整理了37个JavaScript基本面试问题和解答,这些仅仅是作为指导。希望对前端开发的你有所帮助!

React常见面试题

React常见面试题:React中调用setState之后发生了什么事情?React中Element与Component的区别?优先选择使用ClassComponent而不是FunctionalComponent?React中的refs属性的作用是什么?React中keys的作用是什么?

有趣的Js面试题_如何让 (a == 1 && a == 2 && a == 3) 返回 true

题目大意为:JS 环境下,如何让 a == 1 && a == 2 && a == 3 这个表达式返回 true ?这道题目乍看之下似乎不太可能,因为在正常情况下,一个变量的值如果没有手动修改,在一个表达式中是不会变化的。

js练习笔记:10道JavaScript题目

10道JavaScript题目:累加函数addNum、实现一个Person类、实现一个arrMerge 函数、实现一个toCamelStyle函数、setTimeout实现重复调用、实现一个bind函数、实现一个Utils模块、输出一个对象自身的属性

vue菜鸟从业记:没准备好的面试,那叫尬聊

面试开场白总缺少不了自我介绍,一方面是面试官想听听你对自己的介绍,顺便有时间看看简历上的描述,是否与口述一致。另一方面就是看看你简历上做过什么项目,用到了哪些技术栈,一会儿好提问你。

毕业一年左右的前端妹子面试总结

把面试当做学习,这个过程你会收益很大。前端知识很杂,可能实际工作中用到的技术,像框架都是跟着公司的要求走的,像我最近也在看React啦,Vue和React都对比着再学习

vue面试时需要准备的知识点

vue上手可以说是比较轻松而且简单,如果你用过angular,react,你也会很喜欢vue。vue的核心思想依旧是:构建用户界面的渐进式框架,关注视图的变化。这也是为什么新建的文件是结构是template script style

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!