Vue常见面试问题查漏补缺

大熙哥 2021年09月15日 144次浏览

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

v-show 控制 display
v-if 控制DOM的修改

2. 为什么使用key?

唯一标识
高效的更新虚拟 DOM

3. v-modal的使用

v-bind 绑定一个 value 属性
v-on 指令给当前元素绑定 input 事件

4. $nextTick的原理

Vue并没有马上去更新DOM数据,而是将这个操作放进一个队列中;如果我们重复执行的话,队列还会进行去重操作;等待同一事件循环中的所有数据变化完成之后,会将队列中的事件拿出来处理。

这样做主要是为了提升性能,因为如果在主线程中更新DOM,循环100次就要更新100次DOM;但是如果等事件循环完成之后更新DOM,只需要更新1次。

nextTick外层定义了三个变量,有一个变量看名字就很熟悉:callbacks,调用$nextTick的过程其实就是在向callbacks新增回调函数的过程。

把回调函数放入callbacks等待执行,将执行函数放到微任务或者宏任务中,事件循环到了微任务或者宏任务,执行函数依次执行callbacks中的回调。

5. vue常用的修饰符

.stop:等同于 JavaScript 中的 event.stopPropagation() ,防止事件冒泡;
.prevent :等同于 JavaScript 中的 event.preventDefault() ,防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播);
.capture :与事件冒泡的方向相反,事件捕获由外到内;
.self :只会触发自己范围内的事件,不包含子元素;
.once :只会触发一次。

6. Vue-router原理

Hash (对应HashHistory)

#符号本身以及它后面的字符称之为hash(也就是我之前为什么地址栏都会有一个‘#’),可通过window.location.hash属性读取。改变hash不会重新加载页面

每一次改变hash(window.location.hash),都会在浏览器的访问历史中增加一个记录
利用hash的以上特点,就可以来实现前端路由“更新视图但不重新请求页面”的功能了。

History (对应HTML5History)

History接口是浏览器历史记录栈提供的接口,通过back(), forward(), go()等方法,我们可以读取浏览器历史记录栈的信息,进行各种跳转操作。

从HTML5开始,History interface提供了两个新的方法:pushState(), replaceState()使得我们可以对浏览器历史记录栈进行修改。

当浏览器跳转到新的状态时,将触发popState事件。

8. params和query的区别

用法:query要用path来引入,params要用name来引入,接收参数都是类似的,分别是 this.$route.query.name 和 this.$route.params.name 。url地址显示:query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示。
注意点:query刷新不会丢失query里面的数据 params刷新 会 丢失 params里面的数据。

9. vue-router它有哪些组件

router-link、router-view

$route$router 的区别

答:$router 是VueRouter的实例,在script标签中想要导航到不同的URL,使用 $router.push 方法。返回上一个历史history用 $router.to(-1)

$route 为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。

10. vuex有哪几种属性?

有五种,分别是 State、 Getter、Mutation 、Action、 Module
state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法,同步!
actions => 像一个装饰器,包裹mutations,使之可以异步。
modules => 模块化Vuex