2020 Vue 必刷面试题

1. vue.js的两个核心是什么？

答案 : 数据驱动和组件化。

2 .vue的生命周期,哪个生命周期可以看到this,第一个发送请求的是哪一个？

答案 : 8个钩子函数 以及特点

3.vue 的双向绑定的原理是什么？

答案 :
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。具体实现过程：
我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的。接着，我们还需要有一个指令解析器Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者Watcher接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。因此接下去我们执行以下3个步骤，实现数据的双向绑定：
1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

或者 回答 (文档中的定义)
当你把一个普通的 JS 对象传入 Vue 实例 作为 data 选项 Vue 将遍历次对象的所有属性 并使用 Object.defineProperty 把这些数据全部转为 getter/setter 每个组件实例 都有对应的一个 watcher 实例 他会在组件渲染的过程中把"接触"过得数据属性记录为依赖之后当依赖项的 setter 出发时 , 会通知 watcher 从而使他关联的组件重新渲染

4.请问 v-if 和 v-show 有什么区别？

答案:
v-if 是 “真正” 的条件渲染 因为他会确保在切换过程中 条件快内的事件监听器和子组件适当的被销毁和重建 简单的说就是 DOM 元素结构是否能够渲染
v-show 在频繁切换显示与否的时候 使用 v-show ; 是控制元素是否显示 不会操作 DOM
或者回答 :
相同点： 两者都是在判断DOM节点是否要显示。
不同点：
a.实现方式： v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点。 v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。
b.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件； v-show只是简单的基于css切换；
c.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译； v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留；
d.性能消耗：v-if有更高的切换消耗，不适合做频繁的切换； v-show有更高的初始渲染消耗，适合做频繁的额切换；

5.嵌套路由获取参数

答案:
1 > 如果是模块化机制，需要调用 Vue.use ( VueRouter )
2 > 定义路由组件
3 > 定义路由
4 > 创建 router 实例
5 > 创建和挂载根实例
6 > 嵌套路由是通过 children ,他同样是一个数组
7 > 动态路由的创建 主要是用 path 属性过程中 使用动态路径参数 以冒号开头 如 :id 当匹配到这个路由时 参数值会被设置到 this.$router.params下 可以通过这个属性来获取到动态参数

6.Vue 组件之间传值

答案:
父传子 父 : 引入子组件 <child : 方法名 = “传入的值”> 子 : 在 props 中接收[“方法名”]
子传父 子 : this.$emit{(}^{\prime }字方法{名}^{\prime },传的值)父:在html中<child@字方法名="字方法名"></child>兄弟传方法一传:引入bus.js文件bus.$emit ( ‘传方法名’, 传的值 ) 接 : 在 mounted 中 bus.$on("传方法名",(传的值)=>)兄弟传方法二传:为了方便我们的操作我们就不用引入bus.js而是直接调用this.$root.$emit("传方法名",传的值)接:this.$root.$off{(}^{\prime }传方法{名}^{\prime })this.$root.$on{(}^{\prime }传方法{名}^{\prime },function(传的值))这里的this.$root.$off( ‘传方法名’ ) 就是为了每一次的进入的时候都要关闭一下

7.v-on可以监听多个方法吗？

答案:
可以

8.vue中 key 值的作用

答案:
使用key来给每个节点做一个唯一标识
key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

9.Vue 组件中 data 为什么必须是函数？

答案:
在 new Vue() 中，data 是可以作为一个对象进行操作的，然而在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它。当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的。

10.v-for 与 v-if 的优先级

答案:
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中
所以，不推荐v-if和v-for同时使用

11.vue页面级组件之间传值

答案:
1.使用vue-router通过跳转链接带参数传参。
2.使用本地缓存localStorge。
3.使用vuex数据管理传值。

12.递归组件的用法

答案:
组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最终出现“max stack size exceeded”的错误，也就是栈溢出。那么，我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时，组件将不会再进行渲染。

13.怎么定义vue-router的动态路由？怎么获取传过来的值？

答案:
this.$route.params.id

14.vue-router有哪几种路由守卫?

答案:
路由守卫为：
全局守卫：beforeEach
后置守卫：afterEach
全局解析守卫：beforeResolve
路由独享守卫：beforeEnter

15.$route和 $router的区别是什么？

答案:
$router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。$route 是路由信息对象 跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。

16. vue-router 传参

答案:
(1)使用Params:
只能使用name，不能使用path
参数不会显示在路径上
浏览器强制刷新参数会被清空
（2）使用Query：
参数会显示在路径上，刷新不会被清空
name 可以使用path路径

17.watch和computed的区别,data和computed的区别

答案:
计算属性computed :

支持缓存，只有依赖数据发生改变，才会重新进行计算
不支持异步，当computed内有异步操作时无效，无法监听数据的变化
computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
侦听属性watch：

不支持缓存，数据变，直接会触发相应的操作；
watch支持异步；
监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
当一个属性发生变化时，需要执行对应的操作；一对多；
监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
immediate：组件加载立即触发回调函数执行，
deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。
data 和 computed 最核心的区别在于 data 中的属性并不会随赋值变量的改动而改动，而computed 会。

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

答案:
一、如果请求来的数据是不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入vuex 的state里。
二、如果被其他地方复用，这个很大几率上是需要的，如果需要，请将请求放入action里，方便复用，并包装成promise返回，在调用处用async await处理返回的数据。如果不要复用这个请求，那么直接写在vue文件里很方便。

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

答案:
在根dom上加上 style=“display: none;” :style="{display: ‘block’}"

20.ref的作用

答案:
获取dom元素this.$refs.box获取子组件中的datathis.$refs.box.msg
调用子组件中的方法this.$refs.box.open()

21.说说你对 SPA 单页面的理解，它的优缺点分别是什么？

答案:
SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。
优点：
用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
基于上面一点，SPA 相对对服务器压力小；
前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
缺点：
初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载
前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理
SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。