前端面试题-vue-MVC和MVVM
- MVC和MVVM
- VUE常见指令
- 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 适用于需要非常频繁的切换场景的条件