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月前
|
JavaScript 前端开发 应用服务中间件
【Vue面试题三十】、vue项目本地开发完成后部署到服务器后报404是什么原因呢?
这篇文章分析了Vue项目在服务器部署后出现404错误的原因,主要是由于history路由模式下服务器缺少对单页应用的支持,并提供了通过修改nginx配置使用`try_files`指令重定向所有请求到`index.html`的解决方案。
【Vue面试题三十】、vue项目本地开发完成后部署到服务器后报404是什么原因呢?
|
3月前
|
JavaScript 前端开发
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
|
3月前
|
JavaScript 前端开发 数据处理
【Vue面试题二十八】、vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?
这篇文章讨论了Vue中实现权限管理的策略,包括接口权限、路由权限、菜单权限和按钮权限的控制方法,并提供了不同的实现方案及代码示例,以确保用户只能访问被授权的资源。
【Vue面试题二十八】、vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?
|
3月前
|
JavaScript 前端开发
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。
|
2天前
|
JavaScript
vue面试
vue面试
9 1
|
2月前
|
缓存 JavaScript 前端开发
vue面试题
vue面试题
161 64
|
1月前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】
vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】
29 0
vue尚品汇商城项目-day01【8.路由跳转与传参相关面试题】
|
1月前
|
缓存 关系型数据库 MySQL
面试题目总结
面试题目总结
63 6
|
26天前
|
Java C++ Python
【面试宝典】深入Python高级:直戳痛点的题目演示(下)
【面试宝典】深入Python高级:直戳痛点的题目演示(下)
|
29天前
|
设计模式 Unix Python
【面试宝典】深入Python高级:直戳痛点的题目演示(上)
【面试宝典】深入Python高级:直戳痛点的题目演示(上)