vue2 面试题带答案，万字总结

1. 什么是 vue

Vue 是一套用于构建用户界面的渐进式框架。Vue.js 的主要特点：渐进式框架、声明式渲染、组件化、响应式数据绑定等；

2、MVC 和 MVVM 区别

MVC 是模型(model)－视图(view)－控制器(controller)，控制器负责视图和模型的交互。
MVVM，是模型(model)－视图(view)－viewModel，viewModel 双向绑定。
MVVM 与 MVC 区别：MVVM 实现了 View 和 Model 的同步。MVC 需要通过控制器中间控制。

3. Vue 的响应式原理？

Vue 的响应式系统利用了 Object.defineProperty() 方法来把对象的属性转成 getter 和 setter。通过这些 getter/setter，Vue 可以追踪数据的变化，并在数据变化时更新视图。

4. Vue 2 的生命周期

new Vue() 构造函数生成 vue 实例；
beforeCreate：事件和生命周期钩子初始化；
created：实例已经创建完成，data 初始化(props => methods =>data => computed => watch)；数据请求在这里，速度快，loading 少。
beforeMount：编译模板到 render 函数，生成虚拟 dom；
mounted：渲染真实 DOM；
beforeUpdate：数据有更新，且新生成的虚拟 DOM 没有挂载（渲染）到页面上；
updated：虚拟 dom 以最小开支重新渲染 dom；
activated：对于<keep-alive>包裹的组件，当组件被激活时调用。
deactivated：对于<keep-alive>包裹的组件，当组件被停用时调用。
beforeDestroy：在 Vue 实例销毁之前调用。清除定时器、取消网络请求、移除事件监听器等，以确保在组件销毁时不会产生内存泄漏等问题。
destroyed：vue 实例中的数据不可用了。执行一些最终的清理工作，如释放内存、销毁第三方插件。

5. 父子组件生命周期执行顺序

1、加载过程：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
2、更新过程：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
3、销毁过程：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

6. vue 组件传值

props 和 this.$emit(“”）
inheritAttrs，Son 页面 props 没有的数据会默认绑定到根元素上面
$a tt rs ，$ listeners 将 parent 的属性和方法向下传递
provide/inject 祖先组件向其所有子孙后代注入一个依赖
EventBus 不支持响应式：this. $E v e n tB u s .$ emit(a,…),this. $E v e n tB u s .$ on(a,…)
this. $p a re n t 父组件, t hi s .$ children 子组件
vm. $roo t : 组件树的根实例, 如果没有父实例, v m .$ root 指向自己.
vm.$refs
vuex

7、为什么组件的 data 必须是个函数？

如果是对象，多个组件共用了一份 data，一变都变；函数返回对象的独立的拷贝，数据独立；

8. 什么是 Vue 的单向数据流？

数据总是从父组件传到子组件，子组件不能修改父组件传过来的数据，有利于数据维护。

9. v-model 双向绑定原理

当输入的值发生变化时，会触发 input 事件，修改当前 value 值，从而实现了从 view 到 model 的更新。
反之，当 Vue 实例中的数据属性发生变化时，v-model 也会自动更新输入元素的值，实现了从 model 到 view 的更新。

10. 什么是计算属性（computed）和侦听属性（watch）？

计算属性：基于已有的数据，按需计算一个新值，如果依赖的值没有变化，则不再重新计算。
侦听属性：用于观察数据变动，可以在数据变化时执行异步或开销较大的操作。

11. Vue 2 中 computed 属性和 methods 方法有什么区别？

计算属性：是基于其依赖进行缓存的，只有当依赖发生变化时才会重新计算。更适合展示用的数据转换。
方法：每次调用都会执行函数内的代码，不会被缓存，每次调用都会重新执行。

12. key 的作用？

key 的设置有助于 diff 算法更高效地识别哪些元素发生了变化。如果每个元素都有唯一的 key，Vue 可以快速确定哪些元素需要移动、添加或删除，从而减少不必要的 DOM 操作。

13. Vue 的 v-if 和 v-show 有什么区别？

v-if：条件渲染，只有条件为真时，才会在 DOM 中创建或销毁元素。
v-show：不进行 DOM 的创建与销毁，而是通过 CSS 的 display 属性来控制元素的可见性，所有情况都会被渲染到 DOM 中。

14. Vue 的指令（Directive）是什么？有哪些常用的指令？

v-bind：动态绑定属性。
v-model：表单元素的双向数据绑定。
v-for：列表渲染。
v-if、v-else、v-show：条件渲染。
v-once：只渲染一次，数据变化也不在重新渲染

15. 修饰符

v-model 修饰符

.lazy 将文本框的数据绑定事件改为 change
.trim 去掉文本框内两边的空格
.number 限制文本框输入的字符为数字

事件修饰符

.stop 防止事件冒泡
.prevent 取消默认事件
.capture 捕获事件
.self 设置事件触发源是本身
.once 设置只能执行一次的事件
.passive 告诉浏览器你不想阻止事件的默认行为

键盘修饰符

.enter 回车键
.tab Tab 键
.delete
.esc
.space
.up 键盘上键
.down 键盘下键
.left 键盘左键
.right 键盘右键

鼠标修饰符

.left
.right
.middle

修饰键

.ctrl
.alt
.shift
.meta

16. 如何在 Vue 组件中使用插槽（slot）？

默认插槽：直接在子组件模板中定义插槽，父组件可以在对应位置插入内容。
具名插槽：通过 slot 属性定义具名插槽，父组件使用 v-slot 绑定具名插槽。
作用域插槽：通过 slot-scope 属性访问子组件的数据，父组件可以基于子组件的数据动态生成内容。

17. 什么是动态组件？

动态组件就是在组件之间切换的时候，保持这些组件的状态，以避免反复重新渲染导致的性能问题。

<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

include 和 exclude 属性， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存，其中 exclude 的优先级比 include 高；
两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

18. 什么是异步组件

只在需要的时候才加载一个模块。

异步组件和 webpack 的 code-splitting 功能一起配合使用
工厂函数中返回一个 Promise
局部注册:返回 Promise 的函数

//异步组件和 webpack 的 code-splitting 功能一起配合使用
Vue.component('async-webpack-example', function (resolve) {
  // 这个特殊的 `require` 语法将会告诉 webpack
  require(['./my-async-component'], resolve)
})

//工厂函数中返回一个 Promise
Vue.component(
  'async-webpack-example',
  // 这个动态导入会返回一个 `Promise` 对象。
  () => import('./my-async-component')
)

//当使用局部注册的时候，你也可以直接提供一个返回 Promise 的函数：
 components: {
    'my-component': () => import('./my-async-component')
  }

19.组件循环引用问题

递归组件：确保递归调用条件(例如使用 v-if)。
组件之间的循环引用：1 共享的逻辑或数据提升到父组件，2 用动态导入（import()）来延迟加载模块

20.Vue 如何检测数组变化

考虑性能原因数组没有用 defineProperty 对数组的每一项进行拦截，而是选择对 7 种数组（push,shift,pop,splice,unshift,sort,reverse）方法进行重写.数组的索引和长度不会监听。

21. 如何确保数组的修改是响应式的？

Vue.set 向响应式对象中添加一个 property
替换整个数组

22. nextTick 你用过吗?

nextTick 是用于获取更新后的 DOM。

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中。如果同一个 watcher 被多次触发，只会被推入到队列中一次。

23. Vue 事件绑定？

原生事件是通过 addEventListener 绑定的， Vue 组件使用$on ，如果要在 vue 组件上使用原生事件，需要加.native 修饰符。vue 的事件是基于发布订阅模式的，实例方法：

vm.$on( event, callback )：注册自定义事件。
vm.$emit( eventName, […args] ):执行事件
vm.$off( [event, callback] )：移除自定义事件监听器。
vm.$once( event, callback )：监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。

vue-router

vue-router 是 Vue.js 官方的路由管理器。通过不同的 URL 路径来加载不同的组件，实现页面的切换效果。

24.vue-router 路由模式有几种？

hash: 使用 url 的 # 值来作路由， hashchange 事件来监听 hash 值的变化
history : 依赖 HTML5 History API ，主要有 history.pushState()和 history.replaceState()方法，window.onpopstate = (event) => {}事件。