vue面试题大全

__爱吃香菜

已于 2024-04-11 17:18:28 修改

阅读量1.8k

点赞数 1

分类专栏： vue 文章标签： vue.js 前端

于 2023-02-13 11:38:01 首次发布

本文链接：https://blog.csdn.net/weixin_59763367/article/details/129004537

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Vue面试题大全

一.vue的基本原理

当一个vue实例创建的时候，vue会遍历data中的属性，用object.defineProperty，将它们转为getter/setter，并且在内部追踪相关依赖，在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例，它会在组件渲染的过程中把谁能够记录为依赖，之后依赖的setter被调用时，会通知wacther重新计算，从而导致它关联的组件得以更新。

二.双向数据绑定的原理

vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
VUE双向数据绑定，其核心是 Object.defineProperty()方法,给Vue中的数据绑定get和set方法，当获取数据的时候，调用get方法，修改data中的数据的时候调用set方法，通过watcher监听器去更新视图，完成数据的双向绑定。

 1. 需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，
	给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化。

 2. compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，
 	 添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。
 3.watcher订阅者是observer和compile之间通信的桥梁，主要做的事情是：1*.在自身实例化时往属性订阅器里面添加组件 
 2*.自身必须有一个update()方法.3*待属性变动dep.notice()通知时，能调用自身的update（）方法，
 		并触发complie中绑定的回调，则功成身退。
 4. MVVM作为数据绑定的入口，整合observer、compile和watcher三者，通过observer来监听自己的model数据变化，
	通过compile来解析编译模板指令，最终利用watcher搭起来Observer和Compile之间的通信桥梁，达到数据变化，
	视图更新，视图交互话变化，数据model变更的双向绑定效果。

三.使用object.defineProperty()来进行数据劫持有什么缺点？

在对一些属性进行操作时，使用这种方法无法拦截，比如通过下标的方式修改数组数据，或者给对象新增属性，这都不能触发组件的重新渲染，因为object.defineProperty不能拦截到这些操作。更精确的来说，对于数组而言，大部分操作都是拦截不到的，只是vue内部通过重写函数的方式解决了这个问题。
在vue3.0中已经不使用这种方式了，而是通过proxy对对象进行代理，从而实现数据劫持。使用proxy的好处是它可以完美的监听任何方式的数据改变，唯一的缺点是兼容性问题，因为proxy是es6的语法。

defineProperty和proxy的区别？

vue在实例初始化时遍历data中的所有属性，并使用object.defineProperty把这些属性全部转化为getter/setter。这样当追踪数据发生变化时，setter会被自动调用。
object.defineProperty是Es5中一个无法shim的特征，这也就是vue不支持IE8以及更低版本浏览器的原因。
但是这样做有以下问题：
1.添加或删除对象的属性时候，vue检测不到。因为添加或删除的对象没有在初始化进行响应式处理，只能通过$set来调用object.definePropery()处理。
2.无法监控到数组下标和长度的变化。
vue3使用Proxy来监控数据的变化。proxy是ES6中提供的功能，作用为：用于定义基本操作的自定义行为(比如属性查找，赋值，枚举，函数调用等)。相对于Object.definePropery()有以下几个优点：

1.Proxy直接代理整个对象而非对象属性，这样只需要做一层代理就可以监听同级结构下的所有属性变化，
	包括新增属性和删除属性。
2.Proxy可以监听数组的变化。

Vue3.0为什么要用proxy？

在vue2中，object.defineProperty会改变原始数据，而Proxy是创建对象的虚拟表示，并提供set、get和deleteProperty等处理器，这些处理器可在访问或者修改原始对象上的属性进行拦截，有以下特点：
不需要使用vue.$set或VUe. $delete触发响应式。
全方位的数组变化检测，消除了vue2无效的边界情况。
支持map,set ,WeakSet,weakMap
Proxy实现的响应式原理与vue2的实现原理相同，实现方式大同小异：
get收集依赖
set，delete等触发依赖
对于集合类型，就是对集合对象的方法做一层包装，原方法执行后执行依赖相关的收集或触发逻辑。

四.MVVM、MVC 、MVP、的区别？
mvc，mvp，mvvm是三种常见的架构设计模式，主要是通过分离关注点的方式来组织代码结构，优化开发效率。
在开发单页面应用时，往往一个路由对应了一个脚本文件，所有的页面逻辑都在一个脚本文件里。页面的渲染，数据的获取，对用户事件的响应所有的应用逻辑都混合在一起，这样开发简单项目的时候，可能看不出什么问题来，但是如果项目变得复杂，那么整个文件就会变得冗长，混乱，这样对项目的开发和后期的项目维护非常不利的。
（1）MVC
MVC:通过分离model、view和controller的方式来组织代码结构。其中view负责页面的显示逻辑；
model负责存储页面的业务数据，以及对应数据的操作。并且View和Model应用了观察者模式，当Model层发生改变的时候他会通知有关View层更新页面。Controller层是view层和model层的纽带,它主要负责用户与应用的响应操作，当用户与页面产生交互的时候，controller中的事件触发器就开始工作了，通过调用model层来完成对model的修改，然后，model层再去通知view层更新。

（2）MVVM

MVVM分为model,view,viewmodel； Model代表数据模型，数据和业务逻辑都在model层中定义；
view代表ui视图，负责数据的展示。
viewmodel负责监听model中数据的改变并且控制视图的更新，处理用户交互操作；

Model和view没有直接关联，而且通过viewmodel来进行联系的，model和viewmodel之间有着双向数据绑定的联系。因此当model中的数据改变时会触发view层的刷新，view中由于用户交互操作而改变的数据也会在model中同步。
这种模式实现了Model和view的数据自动同步，因此开发者只需要专注于数据的维护操作即可，而不需要自己操作DOM.

(3)MVP
MVP模式与MVC唯一的不同在于presenter和controller。在MVC模式中使用观察者模式，来实现当model层数据发生变化的时候，通知view层的更新。这样view层和model层耦合在一起，当项目逻辑变得复杂的时候，可能会造成代码的混乱，并且可能会对代码的复用性造成一些问题.MVP的模式通过使用presenter来实现对view层和model层的解耦.
MVC中controller只知道model的接口，因此他没有办法控制view层的更新，MVP模式中，View层的接口暴露给了presenter因此可以在persenter中将Model的变化和View的变化绑定在一起，以此来实现View和model的同步更新.这样就实现了对view和model的解耦，persenter还包含了其他的响应逻辑。

computed 和 Watch的区别？

Computed：

它支持缓存，只有依赖的数据发生了变化，才会重写计算。
不支持异步，当Computed中有异步操作的时，无法监听数据的变化。
computed的值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data声明过，或者父组件传递过来的props中的数据进行计算的。
如果一个属性是由其他属性计算而来的，这个属性依赖其他的属性，一般会使用computed
如果computed属性的属性值是函数，那么默认使用get方法，函数的返回值就是属性值，在computed中，属性有一个get方法和一个set方法，当数据发生变化时，会调用set方法。

Watch：

它不支持缓存，数据变化时，他就会触发响应的操作。
支持异步监听
监听的函数接收两个参数，第一个参数是最新的值，第二个是变化之前的值。
当一个属性发生变化时，就需要执行相应的操作
监听数据必须是data中声明的或者父组件传递过来的props中的数据，当发生变化时，会触发其他操作，函数有两个参数：【immediate：组件加载立即触发回调函数；deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化，需要注意的时，deep无法监听到数组和对象内部的变化。当想要执行异步或者昂贵的操作以响应不断的变化时，就需要使用watch。】

小结

computed计算属性，依赖其他属性值，并且computed的值有缓存，只有它依赖其他属性值，发生改变，下一次获取computed的值才会重新计算computed的值。
watch侦听器：更多的时观察的作用，无缓存性，类似于某些数据的监听回调，每当监听的数据变化时，都会执行回调进行后续操作。

运行场景：

当需要进行数值计算，并且依赖于其他数据时候，应该使用comouted，因为可以利用computed的缓存特性，避免每次获取值时都要重写计算。
当需要在数据变化时执行异步或开销较大的操作时，应该使用watch，使用watch选项允许执行异步操作，限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性我无法做到的。

computed和methods的区别？

可以将同一函数定义为一个method或者一个计算属性。对于最终的结果，两种方式是相同的。
不同点：
computed计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重写求值；
method调用总会执行该函数。

slot是什么？有什么作用？原理是什么？

slot又名插槽，是vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口。插槽是slot元素作为承载分发内容的出口。插槽slot是子组件的一个模板标签元素，而这一个标签元素是否显示，以及怎么显示是由父组件决定的。slot又分三类，默认插槽，具名插槽和作用域插槽。
默认插槽：又称匿名插槽，当slot没有指定name属性值的时候，一个默认显示