面试必问之【vue】篇

1. 什么MVVM ，vue生命周期，watch computed使用
2. 实现全局组件
3. 双向数据绑定原理 vue的原理 --》 数据劫持，compile， 观察者模式 , 手画mvvm.png图
4. vue-router使用及原理,路由嵌套怎么用，动态路由，导航钩子
5. vuex使用以及原理,多个store或者说store划分
6. axios是什么？怎么使用？
7. Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性 具体是ECMAScript5哪些特性啊？
8. 动态路由 类似user/:id 这种情况 user/1 <--> user/1 不会触发 beforeDestroy,destroyed
9. 手画生命周期并讲解各个阶段
10. v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
11. v-if 与 v-for 一起使用 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

beforeDestroy 
destroyed
beforeCreate
created
beforeMount
mounted
复制代码

只有从user --> 到其他路由时才会触发

beforeCreate
created
beforeMount
mounted
复制代码

11. 我在vue-cli中看到 设置别名

resolve: {
    extensions: ['', '.js', '.vue', '.json'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components')
    }
  },
  vue包package.json的main指向 "dist/vue.runtime.common.js"
  <!-- 这里的vue$这样是啥意思？ 在组件中import vue from 'vue'究竟引入的是哪个 -->
复制代码

12. 怎么为已有对象赋予多个新属性？
13. 在vue中为什么要在html中监听事件或者说这样带来的好处
14. 简单说说动态组件和缓存动态组件的用法
15. slot的用法
16. vue的虚拟DOM diff原理
17. 聊聊非props特性（1.覆盖式继承，style和class除外，2.禁止继承inheritAttrs，3.指定谁继承v-bind="$attrs"）
18. 给组件直接加事件加不上 组件中含有input 怎么在组件直接加input事件，$listeners了解一下
19. 事件的.sync修饰符 具体用法
20. 异步组件如何处理加载状态
21. 访问元素 & 组件的三种方式 ：parent -- 都是实例 $ref 元素本身
22. 依赖注入 组件给任何后代组件提供一个方法或数据 provide 选项允许我们指定我们想要提供给后代组件的数据/方法。
23. v-once 知道就好 不要用
24. Vue 提供的 transition 的封装组件，可以给哪些元素和组件添加进入\离开过渡

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点

25. 在进入/离开的过渡中，会有 6 个 class 切换。哪6个 分别表示什么状态？ 可以画图来说明
26. 自定义指令/插件/过滤器 过滤器可以用在两个地方-->双花括号插值和 v-bind 表达式
27. vue服务端渲染 需要注意什么？
28. 谈谈vue的性能优化有哪些？
29. vue项目单元测试
30. vuex问题：

• ...mapState({}) 里面的同名问题

<!-- 下面的localCompInfo如果换成compInfo会报错:  xxx not setter -->
...mapState({
    localCompInfo: state => state.comp.compInfo
  }),
复制代码

31. vuex模块重用的例子
32. vuex的表单处理
33. vuex支持热重载
34. popstate 事件

每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popstate事件。 注意，仅仅调用pushState()方法或replaceState()方法 ，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。 注意，页面第一次加载的时候，浏览器不会触发popstate事件

这里放到这里值得说明的是：vue-rotuer路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面，所以点击路由的跳转就不会触发popstate

那么总结一下就是：

• 页面第一加载不会触发popstate，
• 路由动作不会触发

35. 自定义组件v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突

Vue.component('base-checkbox', {
model: {
  prop: 'checked',
  event: 'change'
},
props: {
  checked: Boolean
},
template: `
  <input
    type="checkbox"
    v-bind:checked="checked"
    v-on:change="$emit('change', $event.target.checked)"
  >
`
})

<base-checkbox v-model="lovingVue"></base-checkbox>
复制代码