"20230404经典Vue面试题：MVVM、响应式数据、数组变化、依赖收集"

20230404经典vue面试题 一、谈谈你对 MVVM 的理解？ MVVM是Model-View-ViewModel的缩写，是一种软件架构模式。它在MVC的基础上将控制层隐藏起来，通过将数据和视图进行关联，使得数据的变化能够自动反映在视图上，而无需手动操作控制层来更新视图。Vue框架并不是一个严格意义上的MVVM框架，而更多的是一个视图层框架，它提供了一个名为Vue的实例，利用Vue实例的数据绑定和视图渲染功能来实现MVVM的思想。 二、谈谈你对 Vue 中响应式数据的理解？ 在Vue中，通过使用defineReactive方法，配合defineProperty方法，对数据的属性进行劫持监听。当数据中的数组和对象类型的值发生变化时，会通过defineReactive方法中定义的getter和setter来监听和响应数据的变化。getter的作用是进行依赖搜集，将当前观察者（watcher）添加到依赖列表中。setter的作用是进行数据的更新，当数据发生变化时，会通知所有依赖该数据的观察者进行更新操作。响应式数据的缺陷是只能监控最外层的属性，如果是多层嵌套的属性，需要进行全量递归的遍历，以实现数据的响应式。 三、Vue 中如何检测数组的变化？ 在Vue中，对于数组类型的数据，没有使用defineProperty来进行监测，而是通过重写数组的7个方法（push、shift、pop、splice、unshift、sort、reverse）来实现对数组的变化的检测。这是因为这些方法都会改变数组本身，因此可以通过在这些方法中进行数据更新的操作，从而实现对数组变化的监听。需要注意的是，数组中的索引和长度是无法被监测到的，因为Vue并没有进行针对性的处理。 四、Vue 中如何进行依赖收集的？ 在Vue初始化的过程中，会为每个响应式数据（data）创建一个Watcher实例，并通过执行数据的getter方法来触发依赖收集的过程。在getter方法中会判断当前是否有处于依赖收集的过程中的Watcher实例，若存在，则会将该Watcher实例添加到数据的依赖列表（dep）中。当数据发生变化时，会通过触发对应dep的notify方法来通知所有依赖该数据的Watcher实例进行更新操作，从而实现了数据的响应式。依赖收集的过程可以确保只有真正使用到数据的地方才会触发数据的更新，提高了性能。 综上所述，Vue框架实现了一套简化的MVVM模式，利用响应式数据的机制实现数据和视图的绑定，通过重写数组的方法和依赖收集的方式来实现对数组的监听和更新，并且通过依赖收集的方式来减少不必要的更新操作，提高了性能。这些特点使得Vue在前端开发中得到了广泛的应用和推广。