前端面试题-vue-MVC和MVVM-VUE常见指令

写在最先，不知不觉更新面试题系列也一个月过去了，在这个过程中查漏补缺良多。也来到了熟悉又不太熟悉的VUE阶段。看这些八股文有用吗，我感觉当然是有用的，扩展自己的思维，当在工作中遇到不会的东西的时候。你虽然不能完全上手，但是你至少知道有这么东西存在，你大概能联想到是这个东西。编程需要天赋这是毋庸置疑的，但是我们也要相信任何东西都是勤能补拙的。既然不是天才，那就和比大多数平凡人去更努力一点吧… 这当然枯燥，但是这也很有趣！

MVC和MVVM

MVC的全名是Model View Controller，是模型(model）-视图(view)- 控制器(controller)的缩写，一种软件设计典范
1.model（模型）:通常模型对象负责在数据库中存取数据
2.view（视图）:是应用程序中处理数据显示的部分
3.Controller (控制器):是应用程序中处理用户交互的部分
MVC的思想：把Controller负责将model的数据用View显示出来，换句话说就是在Controller里面把Model的数据赋值给View。

MVVM新增了VM类。
1.ViewModel层：做了两件事达到了数据的双向绑定，一是将模型转换成视图，即将后端传递的数据转换成所看到的页面。实现的方式是：数据绑定。二是将试图转换为模型，即将所看到的页面转换成后端的数据。实现的方式是dom事件的监听。

MVVM和MVC最大的区别就是:它实现了view和Model的自动同步，也就是当Model的属性改变时，我们不在需要自己动手操作DOM，来改变view的显示，而是改变属性后该属性对应view层显示会自动改变。

整体来看，MVVM比MVC精简给和您，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用在用选择器来操作DOM元素。

VUE常见指令

v-if和v-for 为什么不建议一起使用

首选编辑器会标红，其次他俩在同一个标签中使用，因为解析时先解析v-for（优先级高）再解析 v-if(优先级低)。 如果遇到需要同时使用时可以考虑成计算属性的方式。

Vue双向数据绑定原理（响应式原理）（v-model）

原理：采用数据劫持，结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter/getter ，在数据变动时发布消息给订阅者，触发相应监听回调。
用户看不到setter和getter，但是在内部他们让VUE追踪依赖没在属性被访问和修改时通知变化。

v-if和v-show的区别

v-if在编译过程中会被转换成三元表达式，条件不满足时不渲染此节点，通过dom运算操作。
v-show 会被编译成指令，条件不满足时控制样式讲对应的节点隐藏，通过css样式.
使用场景
v-if适用于在运行时很少改变条件，不需要频繁的切换使用的场景
v-show 适用于需要非常频繁的切换场景的条件