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 },传的值)父:$