Vue高频面试题

1. 简单描述一下vue的设计模式 ⭐⭐⭐⭐⭐

1. vue使用的MVVM设计模式
2. MVVM 是Model-view-viewModel的缩写，也就是把MVC中的Controller演变成ViewModel。
3. **Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁**
4. 数据会绑定到model层并自动将数据通过ViewModel渲染到页面中，视图变化的时候会通知viewModel层更新数据

 

 

2. **vue双向绑定实现原理(v-model实现原理)**⭐⭐⭐⭐⭐

1. 当一个Vue实例创建时，Vue会遍历data选项的属性，用Object.defineProperty将它们转化为getter/setter并且在内部追踪相关依赖，在属性被访问拒绝和修改时通知变化
2. 每个组件实例都有相应的watcher(监听)程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

3. Vue的最大优势是什么

简单易学, 轻量级，整个源码js文件不大, 双向数据绑定, 数据驱动视图, 组件化, 数据和视图分离

4. Vue和jQuery区别是什么

jQuery是一个库, 里面封装了各种易用的方法, 方便你使用更少的代码来操作dom标签，不使用它也没什么影响

Vue是一套框架, 有自己的规则和体系与语法, 特别是设计思想MVVM, 让数据和视图关联绑定, 省略了很多DOM操作. 然后指令还给标签注入了更多的功能，用vue创建的项目离不开vue

5. 对Vue渐进式的理解

渐进式代表的含义是：主张最少, 自底向上, 增量开发, 组件集合, 便于复用

6. Vue常用修饰符有哪些

**.prevent**: 阻止默认跳转行为；

**.stop**: 阻止单击事件冒泡；

**.trim**: 去除输入框值的左右两边的空格

7. v-show和v-if的区别

v-show和v-if的区别? 分别说明其使用场景?

1. v-show 和**v-if都是true的时候显示，false**的时候隐藏
2. 但是：**false**的情况下:
   1. v-show是采用的display:none
   2. v-if直接删除dom元素
3. 如果渲染的数据是静态的，使用v-show，动态的使用v-if

8. 说出至少4个Vue指令及作用

1. v-for 根据数组的个数, 循环数组元素的同时还生成所在的标签
2. v-bind 动态绑定 作用： 及时对页面的数据进行更改, 可以简写成**:**分号
3. v-on</