vue常见面试题

1.e6中继承为什么要用super()

2.在vue中调用函数是在create，mouted中？
在单个组件中，因为请求数据是异步的，所以你无论放到created、mounted，都是在最后执行。
当遇到父子组件中，组件的加载顺序是：先执行父的前3个生命周期，再执行子的前4个生命周期。
这个时候的异步就有了优先顺序。如果你想让父的请求优先执行，就放created中；
如果想让子的请求先执行，父的请求就放mounted中，子的请求放在created、mounted都可以。
3.vue的双向绑定原理
双向绑定其实也就是视图与数据的绑定,一般在表单数据中使用，当数据发生改变时，视图层会自动更新,当视图层发生改变时，数据也会自动更新。
vue创建实例对象时，会对data中的所有属性进行迭代遍历，用Object.defineProperty()给属性添加getter和setter。在属性发生改变时，setter会被调用，通知vue去更新页面
4.beforecreate与created区别
beforecreate：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watcher/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforecreate 也可以进行异步操作 但是data 不可用,不可以调用methods中的方法
created 也可以进行异步操作 但是data 可用,可以调用methods中的方法
5.生命周期第一次执行那几个
befrCreate、created、beforeMount、mounted

6.keep－active第一次执行那几个生命周期，(6个) 第二次也是6个
befrCreate、created、beforeMount、mounted、active、deactive
7.那些操作会造成内存泄露
console.log
闭包没有及时关闭
dom 引用没有及时清除
定时器没有及时清除
事件监听没有及时清除
没有被销毁的变量
被循环引用的对象
8.ES6 中有了 var 为什么还要用 let？
为了解决未定义就可以使用的，造成代码不清晰的问题 解决var定义变量造成命名提升的bug 增加块级作用域的功能
9.Vue 中组件和插件有什么区别？
组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在 Vue 中每一个.vue 文件都可以视为一个组件。
插件不仅仅是组件，还可以是指令、全局函数、指令、特殊hook（例如weex的render重写）、mixin、option， 组件只是组件
10.export和export default的区别
均可导出常量、函数、文件、模块等。 在一个文件或模块中，export、import可以有多个。export default仅有一个。 通过export方式导出，在导入时要加{ }，export default则不需要。
11.WebSocket 的应用场景主要有哪些？
即时通讯，大文件下载 数据实时监控，聊天等
12.Vue 中 v-if 和 v-show 的共同点和不同点有哪些？
v-if控制元素显示或隐藏是把dom元素整个的渲染或者删除，如果删除，也就是页面中不存在这个dom元素，以此达到隐藏的效果；所以v-if在每次切换的时候都会重新创建或者销毁元素，有较高的切换性能消耗；而且v-if在初始渲染时条件是假的，那么就什么都不会做，知道条件第一次为真时，需要渲染才开始渲染条件块。
v-show是无论你的初始条件是什么，元素都会被渲染，就是dom元素始终存在的，只是通过控制css中的display属性来控制他的显示或者影响，他拥有比较高的初始渲染消耗
13.组件之间的通信
props/$emit
provide/inject
parent/children/root
EventBus
Vuex
14.Vue 中的 computed 和 watch 的区别是什么？
computed是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；
watch 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；
computed 能完成的功能，watch 都可以完成。只不过 vue 官方更推荐我们用 watch 去监听数据，而不是 computed， 这是因为 computed 的值会「缓存」，只有它依赖的属性值发生改变时才会重新计算 computed 的值；
但是 watch 监听的函数是每次监听的数据发生变化时都要执行一遍的，所以 watch 更加适合「执行异步操作」或「开销较大」的监听场景。
15.说说你对nextTick的理解
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。
在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。
16.vue中组件和插件有什么区别吗?
组件是可复用的Vue实例，插件是扩展Vue的功能。
组件可以理解为自定义的标签，插件通常用来为Vue添加全局功能，如vue-router。
17.Vue 中的 key 有什么作用？
key 是为 Vue 中 vnode 的唯一标识，通过这个 key，我们的 diff 操作可以更准确、更快速。
18.什么事虚拟DOM
虚拟Dom就是用js对象是描述真实的Dom节点，虚拟DOM与真实的DOM一一对应的关系
虚拟DOM的作用：
1.跨平台：因为虚拟DOM是用js对象来描述DOM，所以可以跨平台，例如web、weex、react
2.可以更方便的实现跨端应用
3.可以更方便的实现服务端渲染
虚拟DOM的缺点：
1.无法进行极致优化
18.你了解vue的diff算发吗？
diff算法是虚拟DOM的核心，主要作用是同层的树比较，尽量减少DOM操作
diff算法是Vue.js中用于比较两个虚拟DOM树差异的算法。它通过比较两个虚拟DOM树的节点，找出它们之间的差异，并更新实际的DOM树以反映这些差异。diff算法的核心思想是同层比较，即只比较同一级别的节点，避免不必要的深度遍历。同时，diff算法还考虑了节点的移动、删除和添加等操作，并能够正确地更新实际的DOM树。diff算法是Vue.js性能优化的关键之一，因为它能够有效地减少DOM操作，提高应用程序的性能。
20.vue-router有哪几种导航钩子?
全局前置守卫：router.beforeEach、
全局解析守卫：router.beforeResolve、
全局后置钩子：router.afterEach、
路由独享的守卫：beforeEnter、
组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
21.vue-router有哪几种路由模式？
hash模式：使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。
history模式：利用history.pushState API来完成URL跳转而无须重新加载页面。
abstract模式：支持所有
22.你有写过自定义指令吗?自定义指令的应用场景有那些？
自定义指令可以用于实现一些自定义的功能，例如：
1.自动获取焦点：v-focus
2.监听页面滚动：v-scroll
3.监听
23.vuex的原理是什么？
vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的方式同步状态的变化。vuex使用单一状态树，即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。
vuex的核心概念：
1.state：存储应用的状态
2.getter：类似于Vue的计算属性，主要用来获取state中的数据
3.mutation：更改Vuex的store中的状态的唯一方法是提交mutation
4.action：类似于mutation
5.module：将store分割成模块，每个模块拥有自己的state、mutation、action、getter等

24.vuex的优点是什么？
1.状态管理方便：vuex的状态存储是响应式的，从store实例中读取状态最简单的方法就是通过计算属性。
2.易于测试：因为状态存储是响应式的，所以测试状态管理变得非常简单。
3.易于调试：可以打断点调试状态管理中的问题。
4.易于维护：代码结构清晰，易于维护。

25.vuex的缺点是什么？
1.增加代码复杂度：vuex需要额外的配置和代码来实现状态管理，这会增加代码的复杂度。
2.不利于代码分割：由于vuex的状态存储是全局的，所以不能很方便地实现代码分割。
3.不利于单元测试：由于vuex的状态存储是全局的，所以不能很方便地实现单元测试。

26.vuex的适用场景是什么？
1.需要集中管理应用的状态：vuex适合用于需要集中管理应用的状态的场景。
2.需要组件之间共享数据：vuex适合用于需要组件之间共享数据的场景。
3.需要状态管理的功能：vuex适合用于需要状态管理的功能的场景。

27.vuex的核心概念有哪些？
1.state：存储应用的状态
2.getter：类似于Vue的计算属性，主要用来获取state中的数据
3.mutation：更改Vuex的store中的状态的唯一方法是提交mutation
4.action：类似于mutation
5.module：将store分割成模块，每个模块拥有自己的state、mutation、action、getter等
28.vue的mixin的理解,有什么应用场景?
1.mixin是一种混合对象，可以将多个对象合并为一个对象。
2.mixin可以用于组件之间的代码复用，可以将多个组件共有的代码提取出来，然后通过mixin来引入。
3.mixin可以用于组件之间的数据共享，可以将多个组件共用的数据提取出来，然后通过mixin来引入。
4.mixin可以用于组件之间的样式共享，可以将多个组件共用的样式提取出来，然后通过mixin来引入。
5.mixin可以用于组件之间的事件共享，可以将多个组件共用的事件提取出来，然后通过mixin来引入。
6.mixin可以用于组件之间的路由共享，可以将多个组件共用的路由提取出来，然后通过mixin来引入。
7.mixin可以用于组件之间的状态管理，可以将多个组件共用的状态管理提取出来，然后通过mixin来引入。
8.mixin可以用于组件之间的生命周期钩子函数，可以将多个组件共用的生命周期钩子函数提取出来，然后通过mixin来引入。
9.mixin可以用于组件之间的其他功能，可以将多个组件共用的其他功能提取出来，然后通过mixin来引入。

29.vue的组件之间的通信方式有哪些?vue的组件之间的数据共享方式有哪些?
1.props：父组件向子组件传递数据
2.$emit：子组件向父组件传递数据3.$refs：父组件通过$refs获取子组件实例，然后通过子组件实例调用子组件的方法或访问子组件的数据4.vuex：全局状态管理5.eventBus：通过eventBus实现组件之间的通信6.$attrs和$listeners：通过$attrs和$listeners实现组件之间的通信
7.provide和inject：通过provide和inject实现组件之间的通信
8.ref：通过ref获取子组件实例，然后通过子组件实例调用子组件的方法或访问子组件的数据
9.slot：通过slot实现组件之间的通信
10.localStorage和sessionStorage：通过localStorage和sessionStorage实现组件之间的通信
11.vuex：通过vuex实现组件之间的数据共享
12.eventBus：通过eventBus实现组件之间的数据共享
30.vue 渲染大量数据时应该怎么优化？
按需加载局部数据, 虚拟列表，无限下拉刷新
js运行异步处理: 分割任务，实现时间切片处理, 类似react fiber, 每次执行记录时间, 超过一定执行时间则settimeout或requestAnimation推迟到下一个时间片,一般一个时间片为16ms
大量纯展示的数据,不需要追踪变化的 用object.freeze冻结（可以使用虚拟列表，Object.freeze冻结对象，Object.preventExtentsion阻止对象扩展来阻止vue给每个对象加上get,set，但是缺点是不能响应了）
数据量大的时候，可以做分页处理。翻页一次请求10-20条数据
优化方案2：
如果一次性传入大量数据
增加加载动画提升用户体验
同时避免浏览器处理大量的dom（具体看下面）
尽量不要再用vue的双向数据绑定了 或者只用部分页面中处理的数据
如果并非一次性传入大量数据 而只是分段加载 但次数特别多
异步渲染组件
使用vue的v-if 最多显示上中（可视区域）下三屏 避免出现大量的dom节点
或者使用分页（体验可能不如上面那么好“无限加载的也要考虑dom过多的情况”）