Vue面试题（自留，持续更新）_v-show可以用什么替代-CSDN博客

本文链接：https://blog.csdn.net/Y_ooo/article/details/124404236

这篇博客深入探讨了Vue的面试题目，涵盖了MVVM和MVC模式理解、Vue数据双向绑定、响应式原理及其在Vue3.x中的变化。还讨论了Vue的异步渲染、生命周期、父子组件交互以及组件通信方式。此外，解释了Diff算法、computed、watch和method的区别，并提供了Vue性能优化建议。

摘要由CSDN通过智能技术生成

文章目录

1.MVVM的理解？MVC？

Model：数据模型，可以定义数据修改和操作的业务逻辑
View：视图层，负责将数据模块转化成UI组件表现出来
ViewModel：同步View和Model的，Model和ViewModel之间的交互是双向的，因此View的数据变化会同步到Model中，Model数据的变化也可以反应到View上。
在这里插入图片描述

MVC
Model：是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。处理数据的crud
View：是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。视图层，前端
Controller：是应用程序中处理用户交互的部分。一般包括业务处理模块和router路由模块
通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

2.Vue数据双向绑定/响应式原理

vue使用mvvm数据双向绑定，采用数据劫持和发布者-订阅者模式的方式，通过Object.defineProperty()给各属性添加setter、getter并劫持监听，在数据变动时发布消息给订阅者，触发相应的监听回调。必须实现以下三点：
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可以拿到最新值并通知订阅者。
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变化的通知，执行指令绑定的回调函数，从而更新视图。

MVVM作为绑定的入口，整合Observer,Compile和Watcher三者，通过Observer来监听model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer，Compile之间的通信桥路，达到数据变化=>视图更新；视图交互变化=>数据model变更的双向绑定效果。

3.Vue响应式原理

响应式：数据发生变化时，视图会重新渲染，匹配更新为最新的值。
Object.defineProperty()为对象中每个属性设置get、set方法，每个声明的属性都会有一个依赖收集器subs。当页面使用到某个属性时，触发get函数，页面的watcher就会放到属性的依赖收集器中，在数据变化时通知更新；当数据改变时，会触发set函数，数据会遍历自己的依赖收集器，逐个通知watcher，视图开始更新。

如何监听数组？
首先看数组里是否存在对象，如果存在则进行深层遍历，再对对象进行definePrope