前端工程师面试题？vue扩展知识？必看？

本文链接：https://blog.csdn.net/weixin_67956222/article/details/124431465

1.MVVM模式的优点以及与MVC模式的区别?

MVVM模式的优点：
1、低耦合：视图（View）可以独⽴于 Model 变化和修改，⼀个 ViewModel 可以绑定到不同的"View"上，当View变化的时候Model
可以不变，当Model变化的时候View也可以不变。
2、可重⽤性：你可以把⼀些视图逻辑放在⼀个ViewModel⾥⾯，让很多 view 重⽤这段视图逻辑。
3、独⽴开发：开发⼈员可以专注于业务逻辑和数据的开发（ViewModel），设计⼈员可以专注于⻚⾯设计。
4、可测试：界⾯素来是⽐较难于测试的，⽽现在测试可以针对ViewModel来写。
MVVM 和 MVC 的区别：
mvc 和 mvvm 其实区别并不⼤。都是⼀种设计思想。

主要区别
mvc 中 Controller演变成 mvvm 中的 viewModel，
mvvm 通过数据来显示视图层⽽不是节点操作。
mvvm主要解决了:
mvc中⼤量的DOM 操作使⻚⾯渲染性能降低，加载速度变慢，影响⽤户体验。

2.怎样理解 Vue 的单向数据流?

数据总是从⽗组件传到⼦组件，⼦组件没有权利修改⽗组件传过来的数据，只能请求⽗组件对原始数据进⾏修改。这样会防⽌从
⼦组件意外改变⽗级组件的状态，从⽽导致你的应⽤的数据流向难以理解。
注意：在⼦组件直接⽤ v-model 绑定⽗组件传过来的 prop 这样是不规范的写法开发环境会报警告。
如果实在要改变⽗组件的 prop 值可以再 data ⾥⾯定义⼀个变量并⽤ prop 的值初始化它之后⽤$emit 通知⽗组件去修改

3.虚拟 DOM 是什么? 有什么优缺点?

虚拟 dom 是利用 js 描述元素与元素的关系，用 js 对象来表示真实的 DOM 树结构，创建一个虚拟 DOM 对象
由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题.
在组件渲染的时候会调用 render 函数，这个函数会生成一个虚拟 dom，再根据这个虚拟 dom 生成真实的 dom，然后这个真实的 dom 会挂载到我们的页面中。
如果只是渲染一个页面后期不改动的话那么虚拟 dom 其实成本更高因为都要渲染成真实的 dom
如果组件内有响应的数据，数据发生改变的时候 render 函数会生成一个新的虚拟 dom 新的虚拟 dom 树和旧的虚拟 dom 树进行对比，找到要要修改的虚拟 dom 的部分，去修改相对应部分的真实 dom

4.Vue的diff算法原理是什么？

diff 算法就是对虚拟 dom 进行对比，并返回一个 patch 对象，这个对象的作用是存储两个节点不同的地方，最后用 patch 里记录的信息去局部更新真实的 dom

diff 算法的步骤
1.js 对象表示真实的 dom 结构，就是我们说的生成一个虚拟 dom，再用虚拟 dom 构建一个真的 dom 树，放到页面中。 2.状态改变的时候生成一个新的虚拟 dom 跟旧的进行对比，这个对比的过程就是 diff 算法，通过 patch 对象记录差异 3.把记录的差异用在第一个虚拟 dom 构建的真实的 dom 上，视图就更新了

Vue 的 diff 算法是平级⽐较，不考虑跨级⽐较的情况。内部采⽤深度递归的⽅式+双指针⽅式⽐较