vue面试题目，前端路由

10.对前端路由理解

在前端技术早期，一个 url 对应一个页面，如果要从 A 页面切换到 B 页面，那么必然伴随着页面的刷新。这个体验并不好，不过在最初也是无奈之举——用户只有在刷新页面的情况下，才可以重新去请求数据。

后来，改变发生了——Ajax 出现了，它允许人们在不刷新页面的情况下发起请求；与之共生的，还有“不刷新页面即可更新页面内容”这种需求。在这样的背景下，出现了 SPA（单页面应用）。
SPA极大地提升了用户体验，它允许页面在不刷新的情况下更新页面内容，使内容的切换更加流畅。但是在 SPA 诞生之初，人们并没有考虑到“定位”这个问题——在内容切换前后，页面的 URL 都是一样的，这就带来了两个问题：
SPA 其实并不知道当前的页面“进展到了哪一步”。可能在一个站点下经过了反复的“前进”才终于唤出了某一块内容，但是此时只要刷新一下页面，一切就会被清零，必须重复之前的操作、才可以重新对内容进行定位——SPA 并不会“记住”你的操作。
由于有且仅有一个 URL 给页面做映射，这对 SEO 也不够友好，搜索引擎无法收集全面的信息

为了解决这个问题，前端路由出现了。前端路由可以帮助我们在仅有一个页面的情况下，“记住”用户当前走到了哪一步——为 SPA 中的各个视图匹配一个唯一标识。这意味着用户前进、后退触发的新内容，都会映射到不同的 URL 上去。此时即便他刷新页面，因为当前的 URL 可以标识出他所处的位置，因此内容也不会丢失。那么如何实现这个目的呢？首先要解决两个问题：

●当用户刷新页面时，浏览器会默认根据当前 URL 对资源进行重新定位（发送请求）。这个动作对 SPA 是不必要的，因为我们的 SPA 作为单页面，无论如何也只会有一个资源与之对应。此时若走正常的请求-刷新流程，反而会使用户的前进后退操作无法被记录。●单页面应用对服务端来说，就是一个URL、一套资源，那么如何做到用“不同的URL”来映射不同的视图内容呢？从这两个问题来看，服务端已经完全救不了这个场景了。所以要靠咱们前端自力更生，不然怎么叫“前端路由”呢？作为前端，可以提供这样的解决思路：●拦截用户的刷新操作，避免服务端盲目响应、返回不符合预期的资源内容。把刷新这个动作完全放到前端逻辑里消化掉。●感知 URL 的变化。这里不是说要改造 URL、凭空制造出 N 个 URL 来。而是说 URL 还是那个 URL，只不过我们可以给它做一些微小的处理——这些处理并不会影响 URL 本身的性质，不会影响服务器对它的识别，只有我们前端感知的到。一旦我们感知到了，我们就根据这些变化、用 JS 去给它生成不同的内容。

只有一个ulr给页面做映射，对seo不友好，搜索引起无法手机全部的信息，

记住用户当前走到哪一步了wei1spa在各个视图理赔了唯一的表示，、

为spa当中的哥哥视图匹配了唯一的表示，这意味着用户前进后退触发的新内容都会映射到不同的url上去，刷新页面因为当前的url可以表示出他所处的位置，内容不会丢失

单页面应用对服务端来说是一个url一套资源如何做到用不同的url来映射不同的视图内容

避免服务端盲目响应，返回不喝预期的资源的内容，把刷新这个动作完全放在前端逻辑里消化掉

store就是洗衣液容器，包含着你的应用当中的大部分的内容satte

vuex的状态存储是响应式的，当vue组件从store当中读取状态，如果store当中的状态发生电话，

如果store当中的状态发生变化响应的组件也会响应大道搞笑更新

vuecompomets是vue的组件，组件会触发一些时间或者动作，

vuex当中数据是集中管理的，不能直接去更改数据所以会把动作条道mutaion党总

组件发出动作，获取或者改变数据的,vuex当中数据是集中管理的，不能直接其更改数据，动作提交到mutations当中，mutations去改变state当中的数据，当state当中的数据被改变乐意以后。就会重新渲染到vue components当中去，组件展示更细年后的数据完成新的流程

actions操作行为处理模块，处理vue components接收到所有的交互行为

actions操作行为模块，负责处理vue components接收到的所有的交互行为，包含同步或者异步的操作支持多个同名的方法，按照注册的顺序依次触发，下个后台api请求的操作就在合格模块当中进行，

commit状态改变提交操作的方法，对mutation进行提交是唯一能执行的mutation的方法

mutations状态改变操作的方法，是vuex修改state的唯一的推荐的方法

同步操作

gettersstate对象对象读取方法，没有单独列出该模块，应该被包含在render当中,vue components通过该方法读取state

异步操作常见于调用后端接口异步获取更新数据，或者批量的同步操作徐璈action

action是无法直接修改statemutaion来修改state的数据

mutation中的操作是一系列的同步函数，用于修改state中的变量的的状态。当使用vuex时需要通过commit来提交需要操作的内容。mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      state.count++      // 变更状态
    }
  }
})

当触发一个类型为 increment 的 mutation 时，需要调用此函数

store.commit('increment')

而Action类似于mutation，不同点在于：●Action 可以包含任意异步操作。●Action 提交的是 mutation，而不是直接变更状态

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。所以，两者的不同点如下：●Mutation专注于修改State，理论上是修改State的唯一途径；Action业务代码、异步请求。●Mutation：必须同步执行；Action：可以异步，但不能直接操作State。●在视图更新时，先触发actions，actions再触发mutation●mutation的参数是state，它包含store中的数据；store的参数是context，它是 state 的父级，包含 state、getters\

muation当中的操作是一列的同步函数，用于修改state当中的变量的状态

mutation当中的曹组是一系列的同步函数，用语修改sttae当中的变量的抓奶

action业务代码异步请求

mutation必须通知执行action可以异步按时不能直接操作state

在视图更新的时候先触发actions,actions在歘mutation

mutation的参数是stare他包含store当红的数据，

localStorage则是文件的方式存储在本地

对于不便的数据可以用localStorage代替vuex但是当两个组件共用一个数据源的时候其中一个组件改变了数据源，

对于不变的数据确实可以用localStorage代替vuex按时当两个组件共用一个数据源的时候

vuex改进了redux当中的action和reducer桉树一mutations变化函数取代了reducer

只需要对应demutation函数里面改变sate就可以了

vuex弱化dispatch通过commit进行store状态进行一次更变，取消了action的概念，