vue面试题集（四）

✅作者简介：大家好我是honker707,大家可以叫我honker，新星计划第三季python赛道Top1🏆 📃个人主页：honker707的csdn博客 🔥系列专栏：带你玩转Vue 💬推荐一款模拟面试、刷题神器👉点击跳转进入网站

在这里插入图片描述

前端面试题

• VueX是什么
• 路由守卫
• Vuex原理（简洁版）

VueX是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

路由守卫

导航守卫(全局守卫、路由独享守卫、组件内守卫) 全局守卫 router.beforeEach((to,from,next)=>{})

回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。 组件内的守卫 到达这个组件时，beforeRouteEnter:(to,from,next)=>{}

在Admin.vue文件中，点击转到admin路由时，执行beforeRouteEnter函数 to，from参数与上面使用方法一致。next回调函数略有不同。 如下例，data 组件内守卫有特殊情况，如果我们直接以 beforeRouteEnter:(to,from,next)=>{ alert(“hello” + this.name);}进行访问admin页面，会发现alert输出hello undefined。这是因为，现在访问不到我们的data属性，执行顺序是不一致，这与的声明周期有关。在执行完之前，data数据还未渲染。所以这里，next()会给一个对应的回调，帮助完成。 路由独享的守卫

1. beforeEnter:(to,from,next)=>{}，用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。

Vuex原理（简洁版）

Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时， 必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。 而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的， 还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。