vue全面试题总结

1.vue的优点

1. 渐进式 轻量级
2. 声明式渲染
3. 简单易学

2. vue核心

数据驱动、组件系统
数据驱动：ViewModel，保证数据和视图的一致性。
组件系统：应用类UI可以看作全部是由组件树构成的。

3. Vue 双向绑定原理

数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调

4. Vue 中 key 值的作用？

给元素节点做唯一标识，高效的更新虚拟DOM
同名标签元素过渡切换时，也会用到key属性

5. Vue的生命周期

1. beforecreate
   实例创建以前，此时啥也没有
2. created
   实例创建完成 完成数据观测 此时属性和方法可以使用
   可以初始化ajax请求
3. beforemount
   实例挂在之前，首次调用render函数，
4. mounted
   实例挂载完成，此时可以获取dom对象
5. buforeupdata
   数据更新之前调用，虚拟dom重新渲染之前，可以进行再次操作，不会附加渲染
6. updata
   数据更新完成
7. beforedestroy
   实例销毁前
   1、解绑自定义事件 event.$off
   2、清除定时器
   3、解绑自定义的Dom事件
8. destroyed
   完全销毁

6. computed watch method区别

methods
methods用的是也是最多的，一般的事件绑定，普通函数，
请求数据方法都是在methods中处理。
然后vue的生命周期函数就是在相应的或者合适的时机调用这些定义好的函数。
methods,则是每次触发重新渲染之后，调用方法会再次执行函数。
总结：当我们不希望有缓存的时候，就使用method
computed
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
计算属性是基于它们的响应式依赖进行缓存的
computed 只有在他的的相关依赖发生改变的时候才会重新计算。
如果他的相关依赖并没有发生改变，每次访问都是返回他的缓存的值。
computed适合,获得一个值或者结果，该结果受其他的依赖的影响
watch
watch适合处理的场景是，侦听一个数的变化，当该数据变化，
来处理其他与之相关数据的变化（该数据影响别的多个数据）

computed 和 watch 的相同和不同之处
相同点：
computed 和 watch 都是以vue的依赖追踪为基础的，
都是希望当依赖发生改变的时候，被依赖的数据根据预定好的函数发生改变。
不同点：
watch 监听，一般是监听一个数据，从而影响多个数据
computed 计算属性， 一般是计算一个属性，这个属性受多个数据影响
总结：
一般使用computed,但是如果数据变化时执行异步操作，
或者数据开销太大的情况下，使用watch.

computed受其他数据影响
watch 影响其他数据

7. route 和 router 的区别是什么？

1. route是“路由信息对象”，
2. 包path,params,hash,query,name等路由信息参数。

• router是“路由实例对象”，
  包括了路由的跳转方法(push、replace)，钩子函数等。

8. 为什么vue组件中的data必须是函数

vue组件可能存在多个实例，如果使用对象形式定义data,
则会导致他们公用一个data对象，那么一个变，会影响所有的
组件实例，这是不应该的，采用函数定义，在initData时，会
将其作为工厂函数返回一个全新的对象，规避多实例之间的污染
而vue根实例不存在该限制，因为他只有一个

9. Vue3.x响应式数据原理吗？

用Proxy替代Object.defineProperty。
应为proxy可以直接监听对象和数组的变化

10. 对keep-alive 的了解？

可以让组件保留状态，避免重新渲染，提升页面性能
include和exclude

11. vue常用的修饰符？

1. .prevent: 提交事件不再重载页面；
2. .stop: 阻止单击事件冒泡；
3. .self: 当事件发生在该元素本身而不是子元素的时候会触发；
4. .capture: 事件侦听，事件发生的时候会调用

12. v-show和v-if指令的共同点和不同点

1. v-show 只是在 display: none 和 display: block 之间切换。v-show切换开销很小，更适合于频繁切换的场景。
2. v-if 是元素的重建和销毁 不适合经常切换的场景。

13. MVC,MVVM模式的区别

MVC和MVVM其实区别并不是很大，都是一种设计思想。
MVC
MVC是包括view视图层、controller控制层、model数据层。
各部分之间的通信都是单向的。
View 传送指令到 Controller
Controller 完成业务逻辑后，要求 Model 改变状态
Model 将新的数据发送到 View，用户得到反馈

MVVM
vue是实现了双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层改变更新视图层。在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

mvvm主要解决了mvc中大量 dom操作使得页面渲染性能降低，加载速度变慢，影响用户体验。

14. vuex

vuex:是全局状态管理,用于单页面应用组件之间的数据共享.
state中保存着共有数据
改变state中的数据有且只有通过mutations中的方法,且mutations中的方法必须是同步的
如果要写异步的方法,需要些在actions中, 并通过commit到mutations中进行state中数据的更改.

15. 如何优化SPA应用的首屏加载速度慢的问题？

• 把不常改变的库放到 index.html 中，通过 cdn 引入

• vue 路由的懒加载
• vue 组件尽量不要全局引入
• 使用更轻量级的工具库
• 开启gzip压缩
• 首页单独做服务端渲染

16. vue 路由跳转四种方式 (带参数)

1.  router-link

2.  this.$router.push() (函数里面调用)

3.  this.$router.replace() (用法同上,push)

4.  this.$router.go(n) ()

17. SSR

SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工作放在服务端完成，然后再把html直接返回给客户端。
SSR有着更好的SEO、并且首屏加载速度更快等优点。

18. vue slot

答：简单来说，假如父组件需要在子组件内放一些DOM，那么这些DOM是显示、不显示、在哪个地方显示、如何显示，就是slot分发负责的活。

19. outer-link上事件无效解决方法

使用@click.native。原因：router-link会阻止click事件，.native指直接监听一个原生事件。

20. router-link在安卓上没反应怎么解决？

Vue路由在Android机上有问题，babel问题，安装babel polypill插件解决。

21. vue初始化页面闪动问题

v-cloack

22. vue更新数组时触发视图更新的方法

答:push()；pop()；shift()；unshift()；splice()； sort()；reverse()

23. ajax请求代码应该写在组件的methods中还是vuex的actions中？

如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。
如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用

24. 什么是单页面应用

• 就是指一个系统只加载一次资源，之后的操作交互、
• 数据交互是通过路由、ajax来进行，页面并没有刷新。

25. 单页应用的优缺点

• 优点
• 操作体验流畅，完全的前端组件化
• 缺点
• 首次加载大量资源(按需加载)
• 对搜索引擎seo不友好(运维+服务端渲染>nuxt)
• 开发难度高

26. 单页面应用的实现原理

• 前后端分离(后端专注与数据处理，前端专注于交互和可视化)+

• 前端路由：根部不同的url标识去渲染不同的组件

• 原生js实现路由通过hash和history
• hash改变不会刷新页面的特点，hash改变触发window.onhashchange

27 event

$event 在标签上是原生的dom事件
$event 在组件上是$emit派发时带的参数

28 组件化的优点

可复用、提升开发效率
代码清晰、易于维护
解耦、屏蔽逻辑、迅速定位问题
一致的设计语言和用户体验

slot的作用， 应用场景是什么？

当父组件向子组件传值的时候，有时候，父组件传的并不是单纯的数值、字符串，有可能是带标签（DOM）的数据，那么此时使用插槽
如果我们要让多个组件从父组件传递到子组件,并且想要在子组件中的不同位置渲染它们,则应使用Vue.js的命名插槽功能
如果我们要在父组件里面使用子组件的属性，此时我们使用作用域插槽
注意:插槽内容和父级模板有一样的作用域

如何定义插槽， 和使用插槽？

具名插槽的定义

<slot name="name"></slot>

具名插槽的使用

使用时不同：
2.6.0之前
<template slot="name"></template>

2.6.0之后
<template v-slot:name></template>
<template #name简写的形式></template>

父子组件更新时，钩子执行的顺序？

加载渲染过程
　　父beforeCreate->父created->父beforeMount->子beforeCreate->子created->
　　子beforeMount->子mounted->父mounted

子组件更新过程
　　父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程
　　父beforeUpdate->父updated

销毁过程
　　父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

transition 组件实现动画的必备条件是什么？

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果

transition 通过类名如何实现动画？

如果时组件的话，transition放在跟组件

transition包裹需要动画的元素
用v-if或者v-show来控制

自定义过渡类名 name="name" 来替换v

.v-enter,.v-leave-to{进入之前和离开之后的状态}
.v-enter-active,v-leave-active{进入和离开的过渡效果}

transition 如何使用第三方库实现动画？

$ cnpm install animate.css --save
import 'animate.css' 全局导入
transition(enter-active-class="", enter-leave-class='')
transitoin加在组件自身上，不应该加在使用组件的地方
<div class="animate__animated animate__bounce animate__delay-2s animate__delay-2s	2s">Example</div>

transition-group实现群组动画需要具备的条件？

多个同级元素

路由传参的方式？

<router-link to="/需要跳转的路由路径/需要传递的参数"></router-link>标签进行导航

// 字符串
router.push('/home')
混入
// 对象
router.push({ path: '/home' })

// 命名的路由
//使用params传参的时候，只能用name 来匹配
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' }})

路由的模式都有哪些？有什么特点？

hash模式

hash不会重新加载页面
hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:

window.onhashchange = function(event){
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
    document.body.style.color = hash;
}

history模式

利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法
丢掉了丑陋的#
怕前进，不怕后退，就怕刷新，f5（如果后端没有准备的话）
因为刷新是实实在在地去请求服务器的。

对比

1.hash路由在地址栏URL上有#，而history路由没有会好看一点

2.我们进行回车刷新操作，hash路由会加载到地址栏对应的页面，而history路由一般就404报错了（刷新是网络请求，没有后端准备时会报错）。

3.hash路由支持低版本的浏览器，而history路由是HTML5新增的API。

4.hash的特点在于它虽然出现在了URL中，但是不包括在http请求中，所以对于后端是没有一点影响的，所以改变hash不会重新加载页面，所以这也是单页面应用的必备。

5.history运用了浏览器的历史记录栈，之前有back,forward,go方法，之后在HTML5中新增了pushState（）和replaceState（）方法（需要特定浏览器的支持），它们提供了对历史记录进行修改的功能，不过在进行修改时，虽然改变了当前的URL，但是浏览器不会马上向后端发送请求。