前端面试-Vue常问面试题

558 阅读1分钟

1.关于Vuex

五大核心:

state => 基本数据

getters => 从基本数据派生的数据

mutations => 提交更改数据的方法,同步!

actions => 像一个装饰器,包裹mutations,使之可以异步。

modules [ˈmɒdjuːlz] => 模块化Vuex

原理:

通过官方文档我们知道,每一个vue插件都需要有一个公开的install方法,

vuex也不例外。其代码比较简单,调用了一下applyMixin方法,

该方法主要作用就是在所有组件的beforeCreate生命周期注入了设置this.$store这样一个对象,

因为比较简单,这里不再详细介绍代码了,大家自己读一读编能很容易理解。

使用:

1.利用npm包管理工具,进行安装 vuex

2.新建一个store文件夹(这个不是必须的),并在文件夹下新建store.js文件,文件中引入我们的vue和vuex

3.使用我们vuex,引入之后用Vue.use进行引用

4.在main.js 中引入新建的vuex文件

5.再然后 , 在实例化 Vue对象时加入 store 对象

场景有:单页应用中,组件之间的状态、音乐播放、登录状态、加入购物车

2. vue生命周期?

从开始创建、初始化数据、编译模板、挂载Dom、--渲染、更新---渲染、卸载等一系列过程 就是生命周期

beforeCreate:组件实例被创建之初

created:组件实例化,真实Dom还没有生成,$el还不可用

beforemount:在挂载前被调用,相关的render函数首次被调用

mounted:el被新创建的vm.$el替换

beforeUpdate:组件数据更新之前调用、虚拟Dom打补丁之前

Updated:组件数据更新

activited:keep-alive专属,组件被销毁时调用

deadactivated:keep-alive专属,组件被销毁时调用

beforeDestory:组件销毁前调用

desoryed:组件销毁后调用

3.异步请求适合在哪个生命周期调用

官方给出的是mounted,但是也可以在created

4.关于keep-alive组件?

keep-alive解决“页面缓存”需求(比如跳转到详情页回来时列表页滚动条的深度依旧是原来的位置)

vue-router不保存切换的状态,它进行push或者replace时,旧组件会被销毁,新组件会被建立

走一遍完整的生命周期

keep-alive是个抽象组件(功能型组件)实际上不会被渲染在Dom树中,他的作用是内存中缓存组件

缓存通常出现在页面切换时,所以常和router-view一起出现

	

5. vue组件通信?

1.props自上而下传递、$emit+v-on:向上传递

2.event.bus:通过bus进行信息的发布与订阅

bus.$emit("change",this.msg)

bus.$on("change",data=>{ this.info=data })

3.vuex:对全局资源进行管理

4.provide/inject:允许一个组件向所有组件注入依赖