vue面试题

ゞ浴缸里的玫瑰 2021-12-05 02:31 338阅读 0赞

**1.vuex中异步在哪里写，可以在mutation里面吗，为什么？**

### Mutation 必须是同步函数 ###

一条重要的原则就是要记住 **mutation 必须是同步函数**。为什么？请参考下面的例子：

mutations: {
      someMutation (state) {
        api.callAsyncMethod(() => {
          state.count++
        })
      }
    }

现在想象，**我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。**然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，**devtools 不知道什么时候回调函数实际上被调用**——实质上任何在回调函数中进行的状态的改变都是**不可追踪**的。

在 mutation 中混合异步调用会导致你的**程序很难调试**。例如，**当你调用了两个包含异步回调的 mutation 来改变状态**，你怎么知道什么时候回调和哪个先回调呢？这就是为什么我们要区分这两个概念。在 Vuex 中，**mutation 都是同步事务**：

store.commit('increment')
    // 任何由 "increment" 导致的状态变更都应该在此刻完成。

为了处理异步操作，让我们来看一看 [Action][]。

所以异步操作都在action里面完成的，如何完成呢，继续看官网

我们可以在 action 内部执行**异步**操作：

actions: {
      incrementAsync ({ commit }) {
        setTimeout(() => {
          commit('increment')
        }, 1000)
      }
    }

Actions 支持同样的载荷方式和对象方式进行分发：

// 以载荷形式分发
    store.dispatch('incrementAsync', {
      amount: 10
    })
    
    // 以对象形式分发
    store.dispatch({
      type: 'incrementAsync',
      amount: 10
    })

我们如何才能组合多个 action，以处理更加复杂的异步流程？

actions: {
      actionA ({ commit }) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            commit('someMutation')
            resolve()
          }, 1000)
        })
      }
    }

现在你可以：

store.dispatch('actionA').then(() => {
      // ...
    })

在另外一个 action 中也可以：

actions: {
      // ...
      actionB ({ dispatch, commit }) {
        return dispatch('actionA').then(() => {
          commit('someOtherMutation')
        })
      }
    }

最后，如果我们利用 [async / await][async _ await]，我们可以如下组合 action：

// 假设 getData() 和 getOtherData() 返回的是 Promise
    
    actions: {
      async actionA ({ commit }) {
        commit('gotData', await getData())
      },
      async actionB ({ dispatch, commit }) {
        await dispatch('actionA') // 等待 actionA 完成
        commit('gotOtherData', await getOtherData())
      }
    }

> 一个 `store.dispatch` 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。

**2.vue-router原理 **

> 安装插件
> 
> 混入beforeCreate生命周期处理，初始化\_routerRoot，\_router，\_route等数据，全局设置vue静态访问router和router和route，方便后期访问。完成了router-link和 router-view 两个组件的注册，router-link用于触发路由的变化，router-view作 为功能组件，用于触发对应路由视图的变化
> 
> 根据路由配置生成router实例
> 
> 根据配置数组生成路由配置记录表生成监控路由变化的hsitory对象
> 
> 将router实例传入根vue实例
> 
> 根据beforeCreate混入，为根vue对象设置了劫持字段\_route，用户触发router-view的变化调用init()函数，完成首次路由的渲染，首次渲染的调用路径是 调用history.transitionTo方法，根据router的match函数，生成一个新route对象，接着通过confirmTransition对比一下新生成的route和当前的route对象是否改变，改变的话触发updateRoute，更新hsitory.current属性，触发根组件的\_route的变化,从而导致组件的调用render函数，更新router-view；另外一种更新路由的方式是主动触发 router-link绑定了click方法，触发history.push或者history.replace,从而触发history.transitionTo 同时会监控hashchange和popstate来对路由变化作对用的处理

[https://mp.weixin.qq.com/s/hjFU4PdnFV62TYZ4bxYb5w][https_mp.weixin.qq.com_s_hjFU4PdnFV62TYZ4bxYb5w]

[Action]: https://vuex.vuejs.org/zh/guide/actions.html
[async _ await]: https://tc39.github.io/ecmascript-asyncawait/
[https_mp.weixin.qq.com_s_hjFU4PdnFV62TYZ4bxYb5w]: https://mp.weixin.qq.com/s/hjFU4PdnFV62TYZ4bxYb5w