面试题-7

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

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

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

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

v-show只是简单的css切换

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生命周期的理解

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

创建:

beforeCreated

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

created        

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

挂载

beforeMounted

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

Mounted

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

更新

beforUpdated

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

updated

render重新做了渲染,这时数据和页面都是新的,避免在此更新数据

销毁

beforeDestory

实例销毁前,在这里实例还可以用,可以清除定时器等

,destory

组件已被销毁了,全部都销毁了

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

activited

组件激活时

deactivated

组件被销毁时

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

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

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

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

一般用creatd

6.vue的修饰符有哪些?

1.事件修饰符

.stop   阻止冒泡

.prevent  阻止默认行为

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

.once  事件只会触发一次

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

2.按键修饰符

.keyup  键盘抬起

.keydown  键盘按下

3.系统修饰符

.ctrl

.alt

.meta

4.鼠标修饰符

.left  鼠标左键

.right  鼠标右键

.mibble   鼠标中键

5.表单修饰符

.lazy    等输入完之后再显示

.trim   删除内容前后的空格

.number  输入数字或转为数字

7.element-ui怎么做表单验证的？

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

2.内部添加规则

3.自定义函数校验

8.vue如何进行组件通信？

1.父传子

props

      父组件使用自定义属性,然后子组件使用props

$ref

引用信息会注册在父组件的$refs对象上

2.子传父

$emit

子组件绑定自定义事件,触发执行后,传给父组件,父组件需要使用事件监听接收参数

3.兄弟传值

new一个新的vue实例,用on和emit对数据进行传输

4.vuex传值

9.keep-alive是什么？怎么使用?

Vue的一个内置组件,包裹组件时候,会缓存不活跃的组件实例,并不是销毁他们

作用:把组件切换的状态保存在内存里,防止重复渲染DOM节点,减少加载时间和性能消耗,提高用户体验

10.axios是怎么做封装的？

下载 创建实例  接着封装请求响应拦截器  抛出 最后封装接口

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });