最后
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：docs.qq.com/doc/DSmRnRG… errorLog: ['production', 'development'] }
然后，准备一个状态管理相关文件，用于记录日志。
**errorLog.js**
const state = { logs: [] }
const mutations = { ADD_ERROR_LOG: (state, log) => { state.logs.push(log) }, CLEAR_ERROR_LOG: (state) => { state.logs.splice(0) } }
const actions = { addErrorLog({ commit }, log) { commit('ADD_ERROR_LOG', log) }, clearErrorLog({ commit }) { commit('CLEAR_ERROR_LOG') } }
export default { namespaced: true, state, mutations, actions }
在`store/index.js`中引入`errorLog`模块
**store/index.js**
import Vue from 'vue' import Vuex from 'vuex' import errorLog from './modules/errorLog'
Vue.use(Vuex) const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({ modules: { errorLog }, // 在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。 strict: debug })
然后写一个插件，将全局异常处理函数挂载在`Vue.config.errorHandler`上。
**utils/error-log.js**
import store from '@/store' import { isString, isArray } from './util'
import config from '@/setting'
const install = function (Vue) { const { errorLog: needErrorLog } = config;
function checkNeed() {
const env = process.env.NODE_ENV;
if (isString(needErrorLog)) {
return env === needErrorLog
}
if (isArray(needErrorLog)) {
return needErrorLog.includes(env)
}
return false
}
function writeErrorLog({
err,
route
}) {
// ajax 调用后台接口去记录日志
}
function errorHandler(err, vm, info, a) {
// route： uni-app路由，这里可以修改成自己的内容或去掉
let pages = getCurrentPages(),
route = '';
if (pages.length) {
route = pages[pages.length - 1].route;
}
console.error('globalError', err);
vm && console.error('globalError-vm', vm);
info && console.error(info);
route && console.error('page', route); // route： uni-app路由，这里可以修改成自己的内容或去掉
if (checkNeed()) {
// Don't ask me why I use Vue.nextTick, it just a hack.
// detail see https://forum.vuejs.org/t/dispatch-in-vue-config-errorhandler-has-some-problem/23500
Vue.nextTick(() => {
store.dispatch('errorLog/addErrorLog', {
err,
info,
route // route:uni-app路由，这里可以修改成自己的内容或去掉
})
writeErrorLog({
err,
info,
route // route:uni-app路由，这里可以修改成自己的内容或去掉
})
})
}
}
// 挂载在原型上，即可以在其他页面中使用this.$throw
Vue.prototype.$throw = errorHandler
Vue.config.errorHandler = errorHandler
}
export default install;
至此，已经实现了全局的错误拦截和状态记录。
### 三、uni-app优化
如果是`uni-app`项目，也可以在`App.vue`中定义生命周期钩子`onError`执行`$thow`，这样也能触发全局的错误处理函数。
**App.vue**
export default { onLaunch() { console.log('App-Launch'); },
onShow() {
console.log('App Show');
},
onHide() {
console.log('App Hide')
},
onError(err) {
this.$throw(err);
}
}
也可以在页面中使用`errorCaptured`捕获页面中发生的异常。
### 最后
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『**难的不会，会的不难**』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**
**我特地针对初学者整理一套前端学习资料**
