常见前端面试之VUE面试题汇总六

 17. MVVM 的优缺点?

优点:

分离视图（View）和模型（Model），降低代码耦合，提⾼视图或者 逻辑的重⽤性: ⽐如视图（View）可以独⽴于 Model 变化和修改，⼀个 ViewModel 可以绑定不同的"View"上，当 View 变化的时候 Model 不可以不变，当 Model 变化的时候 View 也可以不变。你可以把⼀些 视图逻辑放在⼀个 ViewModel⾥⾯，让很多 view 重⽤这段视图逻辑

提⾼可测试性: ViewModel 的存在可以帮助开发者更好地编写测试代 码

⾃动更新 dom: 利⽤双向绑定,数据更新后视图⾃动更新,让开发者从 繁琐的⼿动 dom 中解放

缺点:

Bug 很难被调试: 因为使⽤双向绑定的模式，当你看到界⾯异常了，有可能是你 View 的代码有 Bug，也可能是 Model 的代码有问题。数 据绑定使得⼀个位置的 Bug 被快速传递到别的位置，要定位原始出问 题的地⽅就变得不那么容易了。另外，数据绑定的声明是指令式地写 在 View 的模版当中的，这些内容是没办法去打断点 debug 的

⼀个⼤的模块中 model 也会很⼤，虽然使⽤⽅便了也很容易保证了数 据的⼀致性，当时⻓期持有，不释放内存就造成了花费更多的内存

对于⼤型的图形应⽤程序，视图状态较多，ViewModel 的构建和维护 的成本都会⽐较⾼。

18. v-if 和 v-for 哪个优先级更高？如果同时出现，应如何优 化？

v-for 优先于 v-if 被解析，如果同时出现，每次渲染都会先执行循 环再判断条件，无论如何循环都不可避免，浪费了性能。

要避免出现这种情况，则在外层嵌套 template，在这一层进行 v-if 判断，然后在内部进行 v-for 循环。如果条件出现在循环内部，可通 过计算属性提前过滤掉那些不需要显示的项。

19. 对 Vue 组件化的理解

1.组件是独立和可复用的代码组织单元。组件系统是 Vue 核心特性之 一，它使开发者使用小型、独立和通常可复用的组件构建大型应用；

2.组件化开发能大幅提高应用开发效率、测试性、复用性等；

3.组件使用按分类有：页面组件、业务组件、通用组件；

4.vue 的组件是基于配置的，我们通常编写的组件是组件配置而非组 件，框架后续会生成其构造函数，它们基于 VueComponent，扩展于 Vue；

5.vue 中常见组件化技术有：属性 prop，自定义事件，插槽等，它们 主要用于组件通信、扩展等；6.合理的划分组件，有助于提升应用性 能；

6.组件应该是高内聚、低耦合的；

7.遵循单向数据流的原则。