Vue面试题目总结

简介: Vue面试题目总结

1、谈谈你对Vue的理解


简单来说,vue就是一个用于创建用户界面的渐进式的Javascript框架。

它有3个优点:


第一个是采用组件化模式,把html、css、js等组合封装成一个vue组件,这个vue组件是可以重复使用的,这样的话就大大提高了代码的利用率,以及代码维护起来会更加方便。


第二个是声明式编码,程序员可以直接在页面上用vue指令循环遍历数据源,不用手动操作DOM节点,提高软件开发效率。


第三个是采用虚拟DOM和利用Diff算法,把后台的数据传到虚拟DOM中,利用Diff算法比较前后数据更新的变化,这样就可以尽量地复用DOM节点,优化性能。


2、谈谈你对MVVM原理的理解


M就是Model模型,对应Vue实例中的data函数,V就是View视图,对应Vue中的模拟,VM就是ViewModel视图模型,对应Vue实例。


传统的前端需要手动地操作DOM节点来渲染页面,而MVVM模式就直接把后台的数据挂载到Vue实例中。


ViewModel会自动把Model中的数据渲染到View视图中,而当View视图发生变化时,ViewModel也会更新Model层的数据,所以ViewModel是View和Model之间的桥梁,这是一个双向的过程,也就是MVVM是一个数据双向绑定的过程。


这样的好处,就是可以把前后端独立分离开来,提高软件开发效率。


3、什么是响应式数据原理


首先,我们要知道什么是响应式?


响应式就是,页面渲染时使用到了一个数据,当数据改变时,页面会响应是否更新数据,这就叫相应式,这样的好处是不用手写进行操作DOM节点。


然后,什么是响应式数据原理?


简单地来说,响应式数据原理就是,vue通过Object.defineProperty对data中的所有属性进行重新定义,在数据获取和设置时添加一个拦截功能,当我们获取数据时,就会对数据进行收集依赖。当数据改变时,就会通知对应的依赖,进行页面更新渲染。

具体地来说,就是在vue实例初始化的时候,首先会利用initData方法来初始化data数据,然后new Observer来对数据进行检测。


如果数据类型不是对象或者数组的时候,是不会检测的,直接返回数据。

如果数据类型是一个对象,就会调用this.walk()方法对对象进行一个处理,它内部使用defineReactive()方法循环属性,定义响应式变化,它的核心就是通过Obejct.defineProperty重新定义属性,当用户获取数据时,就会调用get方法,收集当前数据的依赖。当改变数据时,就会通知对应的依赖,利用set方法判断数据更新变化,然后触发notify方法进行视图更新。


如果数据类型是数组的话,首先我们要知道改变数组内容的方法有7种,分别是pop、push、shift、unshift、splice、sort、reverse。只要操作其中的一个方法,就会改变数组内容。


那么如何检测数组变化呢?


这就需要使用函数绑定方法,具体来说就是重新定义该数组的原型方法,通过原型链找到我们自己写的原型方法,这样数组内容改变时,调用我们写的方法,这样视图就会更新渲染。如果数组里面的属性有对象的话,就用Observer进行深度遍历,对对象进行检测。


4、说一下computed和methods的区别


computed和methods的区别主要有两个:


第一个是属性、方法调用。computed是属性调用,在定义函数时以属性的形式调用,methods是方法调用,在定义函数时以方法的形式调用,要加()


第二个是缓存功能,computed是计算属性,是有缓存的,当它的依赖属性改变的时候,才会进行重新计算,如果数据没有改变,它是不会运行的。而methods是方法,没有缓存功能,只要你调用一次,不管数据是否改变,它都是执行。


所以,性能方面的比较的话,computed是比methods的性能会好一点,去掉那些无谓的操作。


5、说一下computed和watch的区别


computed是计算属性,它依赖于其他的属性值,当属性值改变的时候,才会重新计算。


watch是监听属性,用来监测自身的属性值,不需要依赖其他属性值。


它们的相同点:都是监听数据变化的。


不同点在于应用场景:computed是用于计算的,适合依赖多个属性值进行计算。

而watch是监听一个属性值,适合用于进行异步操作或者比较大的开销的时候,进行数据监听。比如说设置一个定时器或者监听路由变化这种,这里就需要watch监听,这是computed计算属性没有的。


6、说一下vue的生命周期


vue的生命周期,用一句话来概述就是,一个vue实例从开始创建到销毁的过程,就叫做vue的生命周期


vue的生命周期的关键阶段有8个vue生命周期函数,也叫做生命周期方法/钩子。可以分为3类:


第一类是创建期间的生命周期函数:


1、beforeCreate:这个时期,已经初始化好了vue实例,但是数据和方法还没有被初始化,还没有够被调用。


2、created:这个时期,vue中的数据和方法已经初始化好了,这是第一个可以调用数据和方法的函数


3、BeforeMoute:这个时期,vue中的数据已经预编译好了,但是还没有渲染到模板中。


4、Mouted:这个时期,数据已经渲染到了模板中,可以获取页面中的数据,这里Vue实例已经创建完成。


第二类是运行期间的生命周期函数:


1、beforeUpdate:这个时期,Vue中的数据改变时,视图还没有更新。


2、Updated:这个时期,视图已经更新完毕。


第三类是销毁期间的生命周期函数:


1、beforeDestroy:这是最后一个可以调用Vue中的数据和方法


2、Destroyed:Vue组件销毁,生命周期结束。

相关文章
|
5月前
|
Web App开发 缓存 前端开发
浏览器常见面试题目及详细答案解析
本文围绕浏览器常见面试题及答案展开,深入解析浏览器组成、内核、渲染机制与缓存等核心知识点。内容涵盖浏览器的主要组成部分(如用户界面、呈现引擎、JavaScript解释器等)、主流浏览器内核及其特点、从输入URL到页面呈现的全过程,以及CSS加载对渲染的影响等。结合实际应用场景,帮助读者全面掌握浏览器工作原理,为前端开发和面试提供扎实的知识储备。
252 4
|
5月前
|
缓存 NoSQL Java
Java Redis 面试题集锦 常见高频面试题目及解析
本文总结了Redis在Java中的核心面试题,包括数据类型操作、单线程高性能原理、键过期策略及分布式锁实现等关键内容。通过Jedis代码示例展示了String、List等数据类型的操作方法,讲解了惰性删除和定期删除相结合的过期策略,并提供了Spring Boot配置Redis过期时间的方案。文章还探讨了缓存穿透、雪崩等问题解决方案,以及基于Redis的分布式锁实现,帮助开发者全面掌握Redis在Java应用中的实践要点。
333 6
|
5月前
|
算法 Java 关系型数据库
校招 Java 面试基础题目解析及学习指南含新技术实操要点
本指南聚焦校招Java面试,涵盖Java 8+新特性、多线程与并发、集合与泛型改进及实操项目。内容包括Lambda表达式、Stream API、Optional类、CompletableFuture异步编程、ReentrantLock与Condition、局部变量类型推断(var)、文本块、模块化系统等。通过在线书店系统项目,实践Java核心技术,如书籍管理、用户管理和订单管理,结合Lambda、Stream、CompletableFuture等特性。附带资源链接,助你掌握最新技术,应对面试挑战。
142 2
|
5月前
|
安全 Java 编译器
Java 校招面试题目合集及答案 120 道详解
这份资料汇总了120道Java校招面试题目及其详细答案,涵盖Java基础、JVM原理、多线程、数据类型、方法重载与覆盖等多个核心知识点。通过实例代码解析,帮助求职者深入理解Java编程精髓,为校招面试做好充分准备。无论是初学者还是进阶开发者,都能从中受益,提升技术实力和面试成功率。附带的资源链接提供了更多学习材料,助力高效备考。
285 3
|
5月前
|
存储 算法 Java
校招 java 面试基础题目及解析
本文围绕Java校招面试基础题目展开,涵盖平台无关性、面向对象特性(封装、继承、多态)、数据类型、关键字(static、final)、方法相关(重载与覆盖)、流程控制语句、数组与集合、异常处理等核心知识点。通过概念阐述和代码示例,帮助求职者深入理解并掌握Java基础知识,为校招面试做好充分准备。文末还提供了专项练习建议及资源链接,助力提升实战能力。
153 0
|
缓存 JavaScript 前端开发
vue面试题
vue面试题
273 64
|
缓存 关系型数据库 MySQL
面试题目总结
面试题目总结
328 6
|
JavaScript 前端开发 编译器
【Vue面试题三十二】、vue3有了解过吗?能说说跟vue2的区别吗?
这篇文章介绍了Vue 3相对于Vue 2的改进和新增特性,包括性能提升、体积减小、更易维护、更好的TypeScript支持、新的Composition API、新增的Teleport和createRenderer功能,以及Vue 3中的非兼容性变更和API的移除或重命名。
【Vue面试题三十二】、vue3有了解过吗?能说说跟vue2的区别吗?
|
JavaScript 前端开发 API
【Vue面试题三十一】、你是怎么处理vue项目中的错误的?
这篇文章讨论了Vue项目中错误的处理方式,包括后端接口错误和代码逻辑错误的处理策略。文章详细介绍了如何使用axios的拦截器处理后端接口错误,以及Vue提供的全局错误处理函数`errorHandler`和生命周期钩子`errorCaptured`来处理代码中的逻辑错误。此外,还分析了Vue错误处理的源码,解释了`handleError`、`globalHandleError`、`invokeWithErrorHandling`和`logError`函数的作用和处理流程。
【Vue面试题三十一】、你是怎么处理vue项目中的错误的?
|
JavaScript 前端开发
vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】
vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】
164 0
vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】