前端面试总结——Vue2

1. 必考：watch 和 computed 和 methods 区别是什么？

思路：先翻译单词，再阐述作用，最后强行找不同。

要点：computed 和 methods 相比，最大区别是 computed 有缓存：如果 computed 属性依赖的属性没有变化，那么 computed 属性就不会重新计算。methods 则是看到一次计算一次。

watch 和 computed 相比，computed 是计算出一个属性（废话），而 watch 则可能是做别的事情（如上报数据）

2. 必考：Vue 有哪些生命周期钩子函数？分别有什么用？

beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed.

要特别说明哪个钩子里请求数据，答案是 mounted.

3. 必考：Vue 如何实现组件间通信？

父子组件：使用 v-on 通过事件通信

爷孙组件：使用两次 v-on 通过爷爷爸爸通信，爸爸儿子通信实现爷孙通信

任意组件：使用 eventBus = new Vue() 来通信，eventBus.on和eventBus.on 和 eventBus.on和eventBus.emit 是主要API

任意组件：使用 Vuex 通信

参考：segmentfault.com/a/119000002…

4. 必考：Vue 数据响应式怎么做到的？

答案在文档《深入响应式原理》

使用 Object.defineProperty 把这些属性全部转为 getter/setter

Vue 不能检测到对象属性的添加或删除，解决方法是手动调用 Vue.set 或者 this.$set

5. 必考：Vue.set 是做什么用的？

见上一题

6. Vuex 你怎么用的？

背下文档第一句：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

说出核心概念的名字和作用：State/Getter/Mutation/Action/Module

7. VueRouter 你怎么用的？

背下文档第一句：Vue Router 是 Vue.js 官方的路由管理器。

说出核心概念的名字和作用：History 模式/导航守卫/路由懒加载

说出常用 API：

router-link

router-view

this.$router.replace

this.$route.params

this.$router.push('/user-admin')

导航守卫
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

8. 路由守卫是什么？

看官方文档的例子.

router.beforeEnter:三个参数（to,from.next）

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})