1.v-if和v-show的区别?
都可以控制元素的显示和隐藏
1.v-show时控制元素的display值来让元素显示和隐藏;v-if显示隐藏时把DOM元素整个添加和删除
2.v-if有一个局部编译/卸载的过程,切换这个过程中会适当的销毁和重建内部的事件监听和子组件;v-show只是简单的css切换
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元素的唯一标识。
作用:
提高虚拟DOM的更新
若不设置key,可能会触发一些bug
为了触发过渡效果
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中的修饰符有哪些?
事件修饰符
.stop 阻止冒泡
.prevent 阻止默认行为
.capture 内部元素触发的事件先再次处理
.self 只有在event.target是当前元素时触发
.once 事件只会触发一次
.passive 立即触发默认行为
.native 把当前元素作为原生标签看待
按键修饰符
.keyup 按键抬起
.keydown 键盘按下
系统修饰符
.ctrl
.alt
.meta 在 Mac 系统键盘上,meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。
鼠标修饰符
.left 鼠标左键
.right 鼠标右键
.middle 鼠标中键
表单修饰符
.lazy 等输入完之后再显示
.trim 删除内容前后的空格
.number 输入是数字或转为数字
7.Elementui是怎么做表单验证的?
在表单中加rules属性,然后再data里写校验规则