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组件销毁,生命周期结束。

相关文章
|
3天前
|
运维 Linux Docker
Docker笔记(个人向) 简述,最新高频Linux运维面试题目分享
Docker笔记(个人向) 简述,最新高频Linux运维面试题目分享
|
3天前
|
程序员 Python
Job for supervisor,2024年最新b站面试题目
Job for supervisor,2024年最新b站面试题目
|
3天前
|
存储 缓存 JavaScript
web前端常见的面试题汇总(一),web前端面试题目
web前端常见的面试题汇总(一),web前端面试题目
|
3天前
|
JavaScript
vue面试
vue面试
6 1
|
4天前
|
Web App开发 JavaScript Android开发
webRTC(十五),2024最新Android中级面试题目汇总解答
webRTC(十五),2024最新Android中级面试题目汇总解答
|
4天前
|
前端开发 JavaScript 开发工具
4(1),阿里面试官,前端开发面试题目
4(1),阿里面试官,前端开发面试题目
|
4天前
|
JavaScript 前端开发 Go
经典面试题目
经典面试题目
10 0
|
5天前
|
数据可视化 数据挖掘 Python
Matplotlib与Seaborn在Python面试中的可视化题目
【4月更文挑战第16天】本文介绍了Python数据可视化在面试中的重点,聚焦于Matplotlib和Seaborn库。通过基础绘图、进阶图表、图形定制和交互式图表的实例展示了常见面试问题,并列出了一些易错点,如忽视图形清晰度、误用色彩等。建议理解两者功能并注意保持图形简洁,以提升面试表现和数据可视化能力。
24 3
|
5天前
|
算法 索引
【数据结构】10道经典面试题目带你玩转链表
【数据结构】10道经典面试题目带你玩转链表
93 0
|
5天前
|
JavaScript 前端开发 API
vue面试题目汇总
vue面试题目汇总
41 4