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 没有的数据会默认绑定到根元素上面

• $attrs，$listeners 将 parent 的属性和方法向下传递

• provide/inject 祖先组件向其所有子孙后代注入一个依赖

• EventBus 不支持响应式：this.$EventBus.$emit(a,…),this.$EventBus.$on(a,…)

• this.$parent父组件,this.$children 子组件

• vm.$root:组件树的根实例,如果没有父实例,vm.$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` 语法将会告诉 webpackrequire(['./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) => {}事件。

25.路由传参

• url 传参： this.$route.query.id
• post 传参： this.$route.params.id

26.说说 vue-router 完整的导航解析流程是什么？

• 1.导航被触发；
• 2.在失活的组件里调用 beforeRouteLeave 守卫；
• 3.调用全局 beforeEach 守卫；
• 4.在复用组件里调用 beforeRouteUpdate 守卫；
• 5.调用路由配置里的 beforeEnter 守卫；
• 6.解析异步路由组件；
• 7.在被激活的组件里调用 beforeRouteEnter 守卫；
• 8.调用全局 beforeResolve 守卫；
• 9.导航被确认；
• 10.调用全局的 afterEach 钩子；
• 11.DOM 更新；
• 12.用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

27.vue-router 如何响应路由参数的变化？

• 1、使用 watch 监听
• 2、向 router-view 组件中添加 key <router-view :key="$route.fullPath"></router-view>

28.怎么实现动态加载路由？

vue-router 的 addRoutes 方法

29.怎么实现路由懒加载？

箭头函数的方法 component:()=>import('组件路径')

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

30. vuex 执行流程

• 组件触发 Actions。
• Actions 执行异步操作后调用 Mutations 修改 State。
• State 变化触发组件重新渲染。

vue2 性能优化

• 使用异步组件，减少初始加载的体积
• 使用路由懒加载，减少初始加载的体积
• 尽量使用计算属性而不是常规方法
• 正确使用 v-if 和 v-show
• 使用 key 优化列表渲染
• 声明式事件处理，减少不必要的渲染
• 使用 v-once
• 选择合适的生命周期钩子处理数据
• 尽量减少 watch 使用，使用计算属性来替代
• 使用 Object.freeze()冻结对象
• 使用 keep-alive 缓存组件
• 事件，定时器等闭包优化

点个关注：谢谢！