2019-03-06面试题总结

关于vuex

vuex是一个专门为vue应用程序开发的状态管理模式。它采用集中式存储
管理应用的所有组件的状态，并以相应的规则保证状态一种可预测的方式
发生变化vue有几种属性 1.state  1）单一状态树。vuex使用单一状态书，用一个对象就包含了全部的
应用层级状态。至此，它便作为一个【唯一数据源】而存在。这也意味着
每个应用将仅仅包含一个store实例  2）在vue组件中获得vuex状态
    最好在根实例中注册store选项，通过this.$store访问，而不是
在每个需要使用state的组件中需要频繁的导入 3）mapState辅助函数
    当一个组件需要获取多个状态的时候，可以使用mapState辅助函数
帮助我们生成计算属性，这样可以简化代码书写。mapState函数会返回
一个对象，然后可以使用对象展开运算符将它与局部计算属性混合使用  4）不要滥用vuex
    使用vuex并不意味这你需要将所有的状态放入vuex。 2.getters  getters用来从store中的state中派生出一些状态，例如对列表
进行过滤并计数  getters可以认为是store的计算属性。和state类似，有
mapGetters 3.mutations  更改Vuex的store中的状态的唯一方法是提交mutation。
Vuex中的mutations非常类似于事件：每个mutation都有一个字符串
的事件类型(type)和一个回调函数(handler)。这个回调函数就是我们
实际进行状态更改的地方，并且它会接受state作为第一个参数 1）提交载荷（Payload）你可以向store.commit传入额外的参数，即mutation的
载荷（payload）：2）Mutations需遵守Vue的响应规则3）使用常量替代Mutation事件类型4）mutation必须是同步函数5）在组件中提交Mutations你可以在组件中使用this.$store.commit('xxx')提交mutation，
或者使用mapMutations辅助函数将组件中的methods映射为
store.commit调用（需要在根节点注入store） 4. actionsactions类似于mutation，不同在于：· actions提交的是mutation，而不是直接变更状态。· actions可以包含任意异步操作。 1）在组件中分发Action你在组件中使用this.$store.dispatch('xxx')分发action，
或者使用mapActions辅助函数将组件的methods
映射为store.dispatch调用（需要先在根节点注入store）2）组合ActionsAction通常是异步的，那么如何知道action什么时候结束呢？
更重要的是，我们如何才能组合多个action，以处理更加复杂的异步流程？首先，你需要明白store.dispatch可以处理被触发的action的回调函数
返回的Promise，并且store.dispatch仍旧返回Promise。5. Modules由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用
变得非常复杂时，store对象就有可能变得相当臃肿。为了解决以上问题，Vuex允许我们将store分割成模块（module）。 每个模块拥有自己的state、mutation、action、getter、甚至是
嵌套子模块——从上至下进行同样方式的分割。所以vuex在做非父子通信以及状态统一管理都给我们提供了便捷,我们要
合理使用。 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个
容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局
对象有以下两点不同：Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态
的时候，若 store 中的状态发生变化，那么相应的组件也会相应地
得到高效更新。你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径
就是显式地提交 (commit) mutation。这样使得我们可以方便地跟
踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了
解我们的应用。复制代码

关于vue-router

动态路由匹配：

 

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个
 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，
我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 
来达到这个效果：
{ path: '/user/:id', component: User }复制代码

响应路由参数的变化

提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，

原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，
复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
}或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫：

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}复制代码

嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路
径也按某种结构对应嵌套的各层组件，
你会发现，children 配置就是像 routes 配置一样的路由配置数组，所以呢，你可以
嵌套多层路由。此时，基于上面的配置，当你访问 /user/foo 时，User 的出口是不会渲染任何东西，
这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个 空的 
子路由：复制代码

编程式的导航

router.push(location, onComplete?, onAbort?)
// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /userrouter.replace(location, onComplete?, onAbort?)跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟
它的方法名一样 —— 替换掉当前的 history 记录。复制代码

router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，
类似 window.history.go(n)。复制代码

命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，
有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上
用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。
如果 router-view 没有设置名字，那么默认为 default。



const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})复制代码

导航守卫

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守
卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 
或者组件级的。记住参数或查询的改变并不会触发进入/离开的导航守卫。
你可以通过观察 $route 对象来应对这些变化，或使用 
beforeRouteUpdate 的组件内守卫。
const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})to: Route: 即将要进入的目标 路由对象from: Route: 当前导航正要离开的路由next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。复制代码

全局后置钩子

router.afterEach((to, from) => {
  // ...
})复制代码

路由独享的守卫

你可以在路由配置上直接定义 beforeEnter 守卫：const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})
这些守卫与全局前置守卫的方法参数是一样的复制代码

组件内的守卫

最后，你可以在路由组件内直接定义以下路由导航守卫：beforeRouteEnterbeforeRouteUpdate (2.2 新增)beforeRouteLeaveconst Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}
beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}
注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}
这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。beforeRouteLeave (to, from , next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}复制代码

#完整的导航解析流程

导航被触发。在失活的组件里调用离开守卫。调用全局的 beforeEach 守卫。在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。在路由配置里调用 beforeEnter。解析异步路由组件。在被激活的组件里调用 beforeRouteEnter。调用全局的 beforeResolve 守卫 (2.5+)。导航被确认。调用全局的 afterEach 钩子。触发 DOM 更新。用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。复制代码

滚动行为

 关于双向绑定

vue生命周期

vuex使用场景

setTimeout引起的js单线程问题

promise问题

promise是为解决异步处理回调金字塔问题而产生的一种解决方案
promise的特点：
    1.promise的对象的状态不受外部的影响
        1）pending 初始状态        2）fulfilled 成功状态
        3）rejected 失败状态
    Promise 有以上三种状态，只有异步操作的结果可以决定当前是哪
    一种状态，其他任何操作都无法改变这个状态
    2.Promise的状态一旦改变，就不会再变，任何时候都可以得到这个
结果，状态不可以逆，只能由 pending变成fulfilled或者由pending
变成rejected

https://www.jianshu.com/p/002003a38e89 复制代码

es6新特性用法

class
箭头函数
let const
模板字符串
解构
模块
map set
proxies
symbol
promisevue 复制代码

$nexttick

https://www.jianshu.com/p/a7550c0e164f复制代码

父子组件通信

props $emit复制代码

兄弟组件通信

vuex eventBus 全局eventBus复制代码

keep-alive

是Vue的内置组件，能在组件切换过程中将状态保留在内存
中，防止重复渲染DOM。 包裹动态组件时，会缓存不活动的组件实例，而不是销毁
它们。和  相似， 是一个抽象组件：它自
身不会渲染一个 DOM 元素，也不会出现在父组件链中。prop:include: 字符串或正则表达式。只有匹配的组件会被缓存。exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。复制代码

vue 数据更新

Vue 异步执行 DOM 更新。
只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发
生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队
列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM
 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队
列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生
的 Promise.then 和MessageChannel，如果执行环境不支持，会
采用 setTimeout(fn, 0)代替。复制代码

 $route 和 $router的区别？

$router 是router（路由）实例；$route 是一个对象，可以访问path，name等属性。还有就是
route object 是只读的，不可变的，所以我们不能更改其中的值。复制代码