Vue.js 常见面试题【基础类】

[广告:最高 ¥2000 红包]阿里云服务器、主机等产品通用,可叠加官网常规优惠使用 | 限时领取

某培训机构的总结的vue.js的常见面试问题,分为基础类和扩展类。

刚好最近也在学习vue.js框架,就查阅了官方文档,简单回答如下:

[基础类问题]

1.  v-if 和 v-show 的区别是什么?

v-if 会根据条件构建或删除DOM,是存不存在的问题。

v-show 主要功能控制元素的 display 属性,是显不显示的问题。

参考资料:

2. $route和$router的区别是什么?

可以理解为,一个是用来获取路由信息的,一个是用来操作路由的

$route

route是路由信息对象,里面主要包含路由的一些基本信息,包括name、meta、path、hash、query、params、fullPath、matched、redirectedFrom

$router

router是VueRouter的实例,包含了一些路由的跳转方法,钩子函数等

3.  请举出Vue几种常用的指令

v-for 、 v-if 、v-bind、v-on、v-show、v-else

4.  Vue常用的修饰符有哪些?

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

5. v-on可以绑定多个方法吗?

可以,一个元素可以有很多事件。比如:

<input v-on:keyup.enter=”submit” v-on:focus=”onFocus”>

6 .  Vue中key值的作用?

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

当有相同标签名的元素切换时,需要通过key特性设置唯一的值来标记以让Vue区分它们,否则Vue为了效率只会替换相同标签内部的内部。

7.  什么是Vue的计算属性?

在模板中放入太多的逻辑会让模板过重且难以维护,在需要对数据进行复杂处理,且可能多次使用的情况下,尽量采取计算属性的方式。计算属性类似方法,其优点:

  • 使得数据处理结构清晰;
  • 依赖于数据,数据更新,处理结果自动更新;
  • 计算属性内部this指向vm实例;
  • 在template调用时,直接写计算属性名即可;
  • 常用的是getter方法,获取数据,也可以使用set方法改变数据;
  • 相较于methods,不管依赖的数据变不变,methods都会重新计算,但是依赖数据不变的时候computed从缓存中获取,不会重新计算。

参考资料:

8.  如何定义vue-router的动态路由,获取传过来的值?

在 router 目录下的 index.js 文件中,对 path 属性加上 /:id,使用 router 对象的 params.id 获取。

9. watch和computed的差异是什么?

在说差异之前,先说相似点:

watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用相关的函数去实现数据的变动。

主要差异:

  • watch:当监测的属性变化时会自动执行对应的回调函数
  • computed:计算的属性只有在它的相关依赖发生改变时才会重新求值

大多数情况下,计算属性更合适。当需要在数据变化时执行异步或开销较大的操作时,watch更合适。

参考资料:

10.   组件中data为什么是函数?

vue的data数据其实是vue组件原型上的属性,数据存在于内存当中。

一个vue组件就是一个vue实例。

在JS当中实例是通过构造函数来创建的,每个构造函数可以new出很多个实例,那么每个实例都会继承原型上的方法或属性。

vue组件为了保证每个实例上的data数据的独立性,规定了必须使用函数,而不是对象。

因为使用对象的话,每个实例(组件)上使用的data数据是相互影响的,这当然就不是我们想要的了。对象是对于内存地址的引用,直接定义个对象的话组件之间都会使用这个对象,这样会造成组件之间数据相互影响。

参考资料:

码中人 微信公众号

关注微信公众号

码中人 微信公众号