Vue 网红面试题话术

1、说一下vuex

1. 什么是vuex?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理项目的所有组件的状态

1. 在什么地方用到vuex？

在项目中做 购物车或者 登录时候的token的时候用到的

1. vuex5大核心

• state 组件状态

• mutations 操作state中的方法

actions 调用mutations的方法 里面是异步方法

• getters 对state中的数据做逻辑处理

• modules 对state中的数据分模块

1. vuex的运行机制

在组件中通过dispatch 调用actions中的方法，在actions中通过commit调用muations中方法，在mutations中可以直接操作state中的数据，只要state中的数据发生改变就会立即响应到组件的视图上

1. vuex的使用方法

使用挂载到原型上的属性和方法 this.$store上的属性和方法

state ==this.$store.state

mutations this.$store.commit("方法名","参数)

actions this.$store.dispatch("方法名",参数)

getters this.$store.getters.**

modules this.$store.模块名.state

可以使用映射函数来将组件中用到的属性和方法来映射过来

1. vuex持久化

vuex有个缺点就是页面刷新数据丢失，解决办法就是利用插件 vuex-persistate实现数据的持久化

2、你说一下生命周期吧

所谓的vue⽣命周期就是vue实例从创建到销毁的整个过程我们称之为vue的⽣命周期,

通过vue的⽣命周期我们可以在不同的阶段进⾏不同的逻辑操作. vue⽣命周期常⽤的钩⼦函数⼀共有8个,分别是创建前后、挂载前后、更新前后以及销毁前后. 分别对应的钩⼦函数为beforeCreate 创建前、 created创建后、beforeMount 挂载

前、mounted挂载后、beforeUpdate 更新前、updated更新后、beforeDestory 销毁前、 destoryed销毁后,

⻚⾯⼀开始加载的时候就会触发创建前后和挂载前后的钩⼦函数, ⽽更新的钩⼦函数需要当我们改变data的时候才能触发,⽐如 点击按钮,执⾏⼀个⽅法,在这个⽅式⾥⾯给data⾥⾯属性重新进⾏复制操作,这个时候就会更新的钩⼦函数, 销毁的钩⼦函数必须得当组件进⾏切换的时候就会进⾏销毁.

在项⽬开发过程中,我经常使⽤到的钩⼦函数有created,我们经常在created进⾏数据请求,或者获取本地存储的数据,还有⼀些其他的操作. 除了created还有mounted,我们经常在mounted⾥⾯获取dom元素 (有时 候也存在获取不到dom元素的情况,这个时候我们⼀般⽤$nextTick⽅法来解决). 以上就是我对⽣命周期的理解

有父子组件的生命周期函数执行顺序是 ：父beforeCreate->父Created->父beforeMounte->子组件的四个钩子->父组件的mounted

使用kepp-alive会增加两个钩子函数 activated 进入缓存页 deactivated离开缓存页

还有一个错误处理钩子 errorCaptured

3、vue路由有⼏种模式?有什么区别?原理是什么?

vue的路由模式⼀共有两种,分别是哈希和history. 他们的区别是hash模式不会包含在http请求当中,并且hash不会重新加载⻚⾯,⽽使⽤history模式的话,如果前端的url和后端发起请求的url不⼀致的话,会报404错误,所以使⽤history模块的话我们需要和后端进⾏配合.

history的原理就是利⽤html5新增的两个特性⽅法,分别是psuhState和replaceState来完成的. 当堆栈的路径发生改变会触发onpopstate()事件来监听路径变化

hash是通过onhashchange()事