四：Vue

---

1.v-if和v-show的区别？

---

都可以控制元素的显示和隐藏

1.v-show时控制元素的display值来让元素显示和隐藏；v-if显示隐藏时把DOM元素整个添加和删除

2.v-if有一个局部编译/卸载的过程，切换这个过程中会适当的销毁和重建内部的事件监听和子组件；v-show只是简单的ｃｓｓ切换

3.v-if才是真正的条件渲染：v-show从false变成true的时候不会触发组件的生命周期，v-if会触发生命周期

4.v-if的切换效率比较低，v-show的切换效率比较高

2.如何理解MVVM的？

---

是Model－View－ViewModel的缩写。前端开发的架构模式

M：模型，对应的就是data的数据

V：视图，用户界面，DOM

VM：视图模型：Vue的实例对象，连接View和Model的桥梁

核心是提供对View和ViewModel的双向数据绑定，当数据改变的时候，ViewModel能监听到数据的变化，自动更新视图，

当用户操作视图的时候，ViewModel也可以监听到视图的变化，然后通知数据进行改动，这就实现了双向数据绑定

ViewModel通过双向绑定把View和Model连接起来，他们之间的同步是自动的，不需要人为干涉，所以我们只需要关注业务逻辑即可，不需要操作DOM，同时也不需要关注数据的状态问题，因为它是由MVVM统一管理。

3.v-for中key值的作用？

---

key属性是DOM元素的唯一标识。

作用：

1. 提高虚拟DOM的更新

2. 若不设置key，可能会触发一些bug

3. 为了触发过渡效果

4.说一下你对vue生命周期的理解。

---

组件从创建到销毁的过程就是它的生命周期

创建

beforeCreate

在这个阶段属性和方法都不能使用

created

这里是实例创建完成之后，在这里完成了数据监测，可以使用数据，修改数据不会触发updated，也不会更新视图

挂载

beforeMount

完成了模板的编译，虚拟DOM也完成了创建，即将渲染，修改数据，不会触发updated

Mounted

把编译好的模板挂载到页面，这里可以发送异步请求，也可以访问DOM节点

更新

beforeupdate

组件数据更新使用之前，页面上的数据是旧的，组件即将更新准备渲染，可以改变数据

updated

render函数重新做了渲染，这时数据和页面都是新的，避免在此修改数据，防止无限循环

销毁

beforeDestory

实例销毁前，实例还能用可以做收尾工作，比如清除定时器。

destoryed

组件已经被销毁了，全部都销毁

使用了keep-alive时多出两个周期：

keep-alive是vue提供的一个内置组件，页面切换的时候会进行销毁，当我们不想它被销毁的话就需要用keep-alive包裹着组件

activted

组件激活时

deactivited

组件被销毁时

5.在created里面和mounted去请求数据，有什么区别？

---

created：在渲染前去调用，通常先初始化属性，然后做渲染

mounted：在模板渲染完成后调用，一般都是初始化页面后，再对元素节点进行操作。

在这里请求数据可能会出现闪屏的问题，created里不会

一般用created比较多

请求的数据会对DOM有影响那么用created，如果请求的数据对DOM无关，可以放在mounted

6.Vue中的修饰符有哪些？

---

1. 事件修饰符

.stop　　阻止冒泡

．prevent　　阻止默认行为

.capture　内部元素触发的事件先再次处理

．self　　只有在event．target是当前元素时触发

．once　 事件只会触发一次

．passive 立即触发默认行为

．native 把当前元素作为原生标签看待

2. 按键修饰符

.keyup　　按键抬起

．keydown　　键盘按下

3. 系统修饰符

.ctrl

．alt

．meta 在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。

4. 鼠标修饰符

．left　　鼠标左键

．right　鼠标右键

．middle　鼠标中键

5. 表单修饰符

．lazy 等输入完之后再显示

．trim　删除内容前后的空格

．number　输入是数字或转为数字

7.Elementui是怎么做表单验证的？

---

1. 在表单中加rules属性，然后再data里写校验规则