面试必问之【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> 复制代码