常见Vue面试题
1.对Vue的理解
vue是一套用于构建用户界面的渐进式框架，相当于view层, 可以双向数据绑定, 相对其他框架，他更轻量, 性能上更高效, 更容易上手, 学习成本低,可以和各种支持的第三方库结合使用，完全能够为复杂的单页面富应用(SPA)提供驱动
2.与React的区别
React采用特殊的JSX语法，Vue在组件开发中使用.vue特殊文件格式；中心思想相同：都是使用组件，组件实例之间可以嵌套；都不内置AJAX，Route等功能到核心包，而是以插件的方式加载；在组件开发中都支持mixins的特性。
3.生命周期
-
实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。 -
可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后 -
beforeCreate：在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法 -
created：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作 -
beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的 -
mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行 -
beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步 -
updated：页面显示的数据和data中的数据已经保持同步了，都是最新的 -
beforeDestroy：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于可用状态。还没有真正被销毁 -
destroyed： 这个时候上所有的 data 和 methods ，指令，过滤器 ……都是处于不可用状态。组件已经被销毁了。
4.Vue获取数据在哪个生命周期
- 一般 created/beforeMount/mounted 皆可
- 如果你要操作 DOM , mounted 时候才能操作
- 如果想要在created操作DOM，可以通过 vm.$nextTick 来访问 Dom
5.MVVM与MVC
5.1MVVM
- Model模型：用于处理应用程序的数据逻辑
- View视图：用于应用程序中处理数据显示
- ViewModel视图模型：做了两件事达到了数据的双向绑定 一是将【模型】转化成【视图】，二是将【视图】转化成【模型】
- vue是实现了双向数据绑定的mvvm框架，就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。
5.2MVC
5.3区别
- MVVM 与 MVC 最大的区别就是：它实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变
6.Vue中响应式是如何实现的？
vue 响应式是通过 数据劫持 结合 观察者模式的方式来实现的，
核心：关于VUE响应式，其核心是 Object.defineProperty()方法。
7.vue组件中的data为什么是函数
组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了
8.分别简述computed和watch的使用场景
- computed:计算属性
- 当一个属性受多个属性影响的时候就需要用到computed
- 最典型的栗子： 购物车商品结算的时候
- watch:侦听属性
- 当一条数据影响多条数据的时候就需要用watch
- 栗子：搜索数据
9.如何获取dom
ref=“domName” 用法：this.$refs.domName
10.Vue两个核心点
数据驱动(ViewModel)、组件系统
11.Vue组件通信方式
-
props 和$emit：父组件向子组件传递数据是通过 prop 传递的，子组件传递数据给父组件是通过$emit 触发事件来做到的
-
$parent,$children 获取当前组件的父组件和子组件
-
$refs获取组件实例
-
eventBus 兄弟组件数据传递 ，这种情况下可以使用事件总线的方式
-
vuex状态管理
12.虚拟DOM是什么？有什么优缺点？
13.Vue事件绑定原理
- 原生事件绑定是通过 addEventListener 绑定给真实元素的，组件事件绑定是通过 Vue 自定义的$on 实现的。
- 如果要在组件上使用原生事件，需要加**.native** 修饰符，这样就相当于在父组件中把子组件当做普通 html 标签，然后加上原生事件
14.Vue-Router动态路由
- 把某种模式匹配到的所有路由，全都映射到同个组件
- 路由路径中使用“动态路径参数”
const router = new VueRouter({
routes: [
{ path: "/user/:id", component: User },
],
});
- vue-router 组件复用导致路由参数失效怎么办?
15.对Vuex的理解
vuex 是专门为 vue 提供的全局状态管理系统，可以为多个组件实现数据共享、数据缓存等
- 主要包括以下几个模块
- State：存放数据
- Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
- Mutation：是唯一更改 State的方法，且必须是同步函数
- Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作
- Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中
16.Vuex 页面刷新数据丢失怎么解决
- 需要做 vuex 数据持久化， 一般使用本地存储的方案来保存数据 ，可以自己设计存储方案 ，也可以使用第三方插件
- 推荐使用 vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中
17.Vuex 为什么要分模块
- 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象中。
- 当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
- 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
18.vue 中使用了哪些设计模式
-
1.工厂模式 - 传入参数即可创建实例 虚拟 DOM 根据参数的不同返回基础标签的 Vnode 和组件 Vnode -
2.单例模式 - 整个程序有且仅有一个实例 vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉 -
3.发布-订阅模式 (vue 事件机制) -
4.观察者模式 (响应式数据原理) -
5.装饰模式: (@装饰器的用法) -
6.策略模式 策略模式指对象有某个行为,但是在不同的场景中,该行为有不同的实现方案-比如选项的合并策略
19.都做过哪些 Vue 的性能优化
- v-if 和 v-show 区分使用场景
- computed 和 watch 区分使用场景
- v-for 遍历必须加 key，key 最好是 id 值，且避免同时使用 v-if
- 防止内部泄漏，组件销毁后把全局变量和事件销毁
- 图片懒加载
- 路由懒加载
- 适当采用 keep-alive 缓存组件
- 防抖、节流运用
20.Vue.mixin 的使用场景和原理
|