前端面试题-vue-MVC和MVVM
- MVC和MVVM
- VUE常见指令
- [v-if和v-for 为什么不建议一起使用](#v-if和v-for 为什么不建议一起使用)
- Vue双向数据绑定原理（响应式原理）（v-model）
- v-if和v-show的区别
写在最先，不知不觉更新面试题系列也一个月过去了，在这个过程中查漏补缺良多。也来到了熟悉又不太熟悉的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-text | 指令绑定的内容会被当成普通文本去执行,如果内容包含html标签不会解析 |
| v-html | 指令绑定的内容如果存在html标签会被解析（非必要不建议使用，有安全隐患） |
| v-bind | 用于绑定数据和元素属性 简写为:（属性 |
| v-on | 用于绑定事件 简写为(@) |
| v-model | 双向数据绑定 |
| v-if | 条件判断，为真添加元素，为假删除元素 配套的有（v-elif v-else） |
| v-for | 循环 语法为（v-for="(item,idx） in xxx" :key=idx） |
| v-show | 条件判断，为真显示，为假不显示 |
| v-cloack | 解决页面加载过慢页面上会出现{{}}的情况 页面加载完毕才会显示 |
| v-once | 只执行一次 |
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 适用于需要非常频繁的切换场景的条件