最近在牛客网练习的vue相关习题及答案整理，方便大家刷题
Vue相关的题目与答案：
1. 关于Vue组件化说法错误的是
A． 所谓组件化，就是把页面拆分成多个组件 (component)，每个组件依赖的 CSS、JavaScript、模板、图片等资源放在一起开发和维护
B． 组件是资源独立的，组件在系统内部可复用，但是组件和组件之间不可以嵌套
C． vue的组件之间可以进行通信
D． 组件化能提高开发效率，方便重复使用，简化调试步骤，提升项目可维护性，便于多人协同开发
正确答案：B
解析：组件是资源独立的，组件在系统内部可复用，但是组件和组件之间可以嵌套
2. 下列关于客户端渲染和服务器端渲染的描述错误的是
A．服务器端渲染有利于SEO，且首页加载快
B．客户端渲染节省后端资源，但可能会加载慢出现白屏 C．服务器端渲染耗费流量，局部页面的变化也需要重新请求完整的页面
D．客户端和服务器端在首屏渲染上网络请求次数是一样的 正确答案：D
解析：客户端首屏渲染时首先拿到空的html模板，之后继续发起数据请求。而服务器端渲染只需要请求一次，服务器会将请求的数据放在html模板中一起返回。
3. 下列关于Vue的描述错误的是
A．当给某个组件修改某个值时，该组件不会立即重新渲染
B. Vue内部使用原生Promise.then、MutationObserver和setImmediate实现异步 队列，不会采用setTimeout(fn, 0)
C. $nextTick()返回一个Promise对象
D. $nextTick()可以配合async/await使用
正确答案：B
解析：Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
4. 现有以下代码，下面说法错误的是（ ）
<div v-show='flag'>使用v-show控制</div>
<div v-if='flag'>使用v-if控制</div>
A. 当flag是true时，两个div都能显示出来
B. 当flag是false时，第一个div进行了渲染
C. 当flag是false时，第一个div设置了display: none
D．当flag是false时，第二个div设置了visible: hidden
正确答案：D
解析：当v-if的值是false的时候，该元素不进行渲染
5. Vue 中通过给元素添加哪个属性绑定DOM元素（）
A．ref
B．refs
C．$ref
D．$refs
正确答案：A
解析：vue中可以使用ref绑定相应的元素 ref=“name”
然后使用 this.$refs.name 获取到该元素，并且可以直接调用子组件中定义的方法；
6. 下列关于scoped的描述错误的是（ ）
A．scoped原理是在标签上添加data-v属性，然后使用属性选择器实现样式局部化
B. 使用scoped，父组件的样式会渗透到子组件内部的元素
C. 使用scoped不会造成全局污染
D. ">"可以实现样式穿透
正确答案：B
解析：使用scoped后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的scoped css和子组件的scoped css的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。
7. 下列哪个选项不是单页面应用程序（SPA）的优点（ ）
A．不需要重新加载整个页面，运行流畅 B. 高效的前后端分离模式
C. 有利于SEO
D．减轻服务器压力
正确答案：C
解析：单页面应用程序中首页的数据需要通过在服务器异步获取，在这之前首页仅仅是一个模板，不利于seo。
知识点补充：
SPA的优点：
· 无刷新切换内容，提高用户体验。
· 符合前后端分离的开发思想，通过ajax异步请求数据接口获取数据，后台只需要负责数据，不用考虑渲染。前端使用vue等MVVM框架渲染数据非常合适。
· 减轻服务器压力，展示逻辑和数据渲染在前端完成，服务器任务更明确，压力减轻。
· 后端数据接口可复用，设计JSON格式数据可以在PC、移动端通用。
SPA的缺点：
- 不利于SEO（搜索引擎优化），应用数据是通过请求接口动态渲染，不利于SEO。
- 首页加载慢，SPA下大部分的资源需要在首页加载，造成首页白屏等问题。
8. 以下选项中不可以进行路由跳转的是（ ）
A. this.$router.jump()
B. route-link
C. this.$router.push() D．this.$router.replace()
正确答案：A
解析：Vue路由的跳转方式有route-link、this.$router.push()、this.$router.replace()、this.$router.go()等，但是没有this.$router.jump()
9. 下面说法错误的是（ ）
A．watch监听对象必须设置deep: true
B. 数组直接通过索引修改属性值，能触发watch方法
C. watch内部可以写异步方法
D. immediate: true可以开启首次赋值监听
正确答案：B
解析：数组直接通过索引修改属性值不能触发watch
10. 现有以下代码, 打印的结果是（ ）
new Vue({
data: { a: 'first', b: 'second' },
created: function () { console.log(this.a) },
mounted(){ console.log(this.b) }
})
A．'first'
B．'first' 'second'
C. undefined undefined D. 空
正确答案: A
解析：mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作。但是题例中没有执行dom挂载，所以mounted不会执行
11. 下列关于Vue模块化开发的描述错误的是（ ）
A. 代码复用性高
B. 便于维护
C. 增加代码之间的耦合度
D. 避免命名冲突
正确答案: C
解析：模块化开发就是将大的文件拆分为许多独立的小文件，按需在不同的组件中导入，降低了代码耦合度，提高了代码复用性。
12. 关于路由说法错误的是（ ）
A.使用脚手架创建项目时，需要选择安装vue-router
B.在嵌套路由中，需要VueRouter的参数中使用children配置
C. vue-router不可以实现重定向
D. vue-router可以通过配置实现路由懒加载
正确答案: C
解析：vue-router 里可以使用 redirect 实现理由重定向，
如 {path:"/",redirect:"/home"}
将页面重定向到 home页面
13. 现有以下代码，打印的结果是（ ）
new Vue({
data: { a: 1, b: 2 },
watch: {
a: {
handler: function(value){
console.log(value)
}
}
}
})
A. 1 B. 打印语句不执行
C. undefined D. null 正确答案: B
解析：使用watch `handler`属性有一个特点，就是当值第一次绑定时，watch不会执行监听函数，只有值发生改变时才会执行。
如果需要在最初绑定值的时候也执行函数，则就需要用到immediate属性，添加 immediate: true属性
| 1 2 3 4 5 6 7 8 | watch: { a: { handler: function(value){ console.log(value) }, immediate: true } } |
14. 关于路由模式说法错误的是（ ）
A.vue-router有两种模式，history和hash模式
B.hash模式是通过onchange事件，监听url的修改
C.history通过H5提供的API history.pushState 和 history.pushState实现跳转且不刷新页面
D.history模式需要后端进行配合
正确答案: B
解析：hash模式是通过onhashchange事件，监听url的修改
15.以下选项中属于Vuex中的属性的是（ ）
A.state B.Mutations C.actions D.setters 正确答案: A B C
Vuex属性包含state、mutations、actions、getters、modules
16. 以下不是vue内置指令的是（ ）
A. v-html
B.v-on C.v-for D.v-hidden 正确答案: D
没有v-hidden指令
17. 关于Vue双向数据绑定说法错误的是（ ）
A.Vue实现双向数据绑定是采用数据劫持和发布者-订阅者模式
B.Object.defineProperty(obj,key,val)可以监听数组变化，不需要做特殊处理
C.Vue2.0 数据劫持是利用ES5的Object.defineProperty(obj,key,val)方法来劫持每个属性的getter和setter
D.用户更新了View，Model的数据也自动被更新了，这种情况就是双向数据绑定
正确答案: B
Object.defineProperty(obj,key,val)不可以监听数组变化，需要做特殊处理，所以Vue3.0使用Proxy实现数据监听
18. 关于v-model的修饰符说法错误的是（ ）
A.lazy修饰符让内容在“change”事件时而非“input”事件时更新
B.v-model添加number修饰符,可以自动将用户的输入值转为数值类型
C.可以给v-model添加trim修饰符,自动过滤用户输入的首尾空白字符
D.v-model添加number修饰符,如果这个值无法被parseFloat()解析，则会返回null
正确答案: D
v-model添加number修饰符,如果这个值无法被parseFloat()解析，则会返回原始的值。
19. 下列关于Vue2和Vue3的描述错误的是（ ）
A.Vue3中Template支持多个根标签，Vue2不支持
B.Vue3中的生命周期的挂载钩子是onMounted，需要引入才能使用
C.Vue3组合API中的setup()方法中不可以使用生命周期钩子函数
D.Vue3引入了tree-shaking，以模块的方式引入api，减小打包体积
正确答案: C
Vue3的组合API中的setup()方法包含了所有的基本内容，包括生命周期，可以在setup()中使用生命周期钩子函数。
20. 不属于Vue使用虚拟DOM的特点是（ ）
A.虚拟节点可以理解成节点描述对象，它描述了应该怎样去创建真实的DOM节点。
B.虚拟DOM优势：渲染引擎操作 DOM 慢，js运行效率高，于是将DOM对比操作放在JS层，提高效率
C.提升渲染性能 Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新
D.Virtual DOM 是以 JavaScript 对象为基础,所以必须依赖于浏览器才能运行
正确答案: D
Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等。
21.下列关于Vue内置组件的描述错误的是（ ）
transition：为组件的载入和切换提供动画效果
transition-group：作为多个元素/组件的过渡效果
keep-alive：缓存子组件，被包裹的子组件会多出两个生命周期：activated、deactivated
当组件在keep-alive内被切换时，它的mounted和unmounted生命周期钩子也会被调用
正确答案: D
当组件在keep-alive内被切换时，它的mounted和unmounted生命周期钩子会被activated和、deactivated代替。
22. 请按顺序选择正确的代码，实现图片预加载功能（ ）
<template>
<div>
<div>
<h1><strong>Loading...</strong></h1>
<h2><strong>{{percent}}%</strong></h2>
</div>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
percent: '',
images: [
'example.png',
'...',
'...'
]
}
},
mounted() {
__1__()
},
methods: {
preload: function() {
for (let url __2__ this.images) {
let image = new Image()
image.src = url
image.__3__ = () => {
this.count++
this.percent = Math.floor(this.count / this.images.length * 100)
}
}
},
},
watch: {
__4__: function(num) {
if (num === this.images.length) {
this.$router.push({path: 'home'})
}
}
}
}
</script>
正确答案: C this.preload、of、onload、count
挂载时，调用preload方法，使用of获取数组每项，图片加载成功时触发onload事件，观察count，当count等于数组长度时，代表全部加载完毕，进行跳转。
23. 下列关于vue-lazyload的描述错误的是（ ）
A.组件中使用vue-lazyload时，v-lazy代替v-bind:src
B.组件中使用vue-lazyload时，必须要加:key属性
C.vue-lazyload指令可以实现图片的懒加载
D.使用vue-lazyload时，扩展功能api中的attempt代表尝试加载图片数量
正确答案: B :key可以不加，如果不加:key属性，刷新页面时，可能由于key相同，图片不刷新。
24. 阅读以下代码，请选择可以正确打印h1标签宽度的选项（ ）
<template>
<div>
<h1 ref='h1' v-if="show">nowcoder</h1>
</div>
</template>
<script>
export default {
data() {
return {
show: false
}
},
mounted() {
this.show = true
// 此处填写代码
}
}
</script>
A.this.$nextTick(function() { console.log(this.$refs.h1.offsetWidth) }) B.setInterval(() => { console.log(this.$refs.h1.offsetWidth) }) C.setTimeout(() => { console.log(this.$refs.h1.offsetWidth) }) D.console.log(this.$refs.h1.offsetWidth) 正确答案: A B C
Vue实现响应式并不是数据发生变化之后DOM立即变化，而是在同步任务执行完成之后才执行渲染任务，简单说Vue的渲染是异步的。
26. 下列不属于Vue的特点的是（ ）
Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统
实现了双向数据绑定 Vue.js可以进行组件化开发，使代码编写量大大减少，读者更加易于理解
Vue虽然也提供了渲染函数，默认使用模板渲染，且不支持JSX
正确答案: D
27. 关于Vue-cli说法错误的是（ ）
Vue CLI是一个基于Vue.js进行快速开发的完整系统
CLI(@vue/cli) 是一个全局安装的npm包，提供了终端里的Vue命令
CLI目前还不能提供图形化界面管理你的所有项目
CLI服务是构建于webpack和webpack-dev-server之上的
正确答案: C 可以通过vue ui一套图形化界面管理你的所有项目
28. 下列关于v-model的说法，哪项是不正确的是（ ）
v-model如果为不同元素绑定数据，则使用不同的元素property， 并抛出不同的事件
v-model本质上是语法糖，它负责监听用户的输入事件以更新数据
v-model是内置指令，不能用在自定义组件上
对input使用v-model，实际上是指定其 :value和input事件
正确答案: C
vue2.2+版本新增了一个功能，可以在自定义组件上使用v-model实现双向绑定
29. 关于Vue双向数据绑定说法错误的是（ ）
Vue实现双向数据绑定是采用数据劫持和发布者-订阅者模式
Object.defineProperty(obj,key,val)可以监听数组变化，不需要做特殊处理
Vue2.0 数据劫持是利用ES5的Object.defineProperty(obj,key,val)方法来劫持每个属性的getter和setter
用户更新了View，Model的数据也自动被更新了，这种情况就是双向数据绑定
正确答案: B
Object.defineProperty(obj,key,val)不可以监听数组变化，需要做特殊处理，所以Vue3.0使用Proxy实现数据监听
30. 关于Vue组件生命周期说法错误的是（ ）
Vue组件的生命周期可以分成三个大阶段：挂载、更新、卸载
挂载阶段中涉及到的钩子函数有：beforeCreate、created、beforeMount、mounted
更新阶段涉及的钩子函数有：beforeUpdate、updated、activated、deactivated
首次进入页面钩子函数的执行顺序：beforeCreate、created、beforeMount、mounted
正确答案: C
Vue组件的生命周期涉及到的钩子函数和执行顺序是：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed，activated和deactivated是组件设置了keep-alive时，进入组件和离开组件时分别触发的两个函数
31. 关于Vue组件的生命周期说法错误的是（ ）
mounted钩子函数中，可以直接获取DOM元素
beforeMount钩子函数中，不可以直接获取DOM元素
beforeDestroy钩子函数中，不可以直接获取DOM元素
destroyed钩子函数中，不可以直接获取DOM元素
正确答案: C
Vue的生命周期的钩子函数中mounted和beforeDestroy中都可以获取到DOM元素
32. 关于Vue组件间通信说法错误的是（ ）
Vuex可以实现任何关系的组件间的通信
如果子组件修改，通过props获取的父组件传过去的字符串或数字会报错
子组件可以通过$emit给父组件传值
可以通过context进行组件间传值
正确答案: D
context是用在react中进行组件间的传值，vue并不提供该方法，Vue组件间传值可以通过props，$emit,Vuex,事件总线。通过props获取父组件的基本数据类型的值，在修改时会报错
33. 关于Vuex说法错误的是（ ）
actions通过commit触发mutations中的方法进行状态变更
Vuex是单项数据流变更数据
ajax一般放在mutations中，把获取到的数据存储state中
由于Vuex使用单一状态树，应用的所有状态会集中到一个比较大的对象
正确答案: C
异步操作放在actions中，actions通过commit调用mutations中方法操作state
一般使用ajax时会使用异步处理，而mutation是写同步操作的，异步一般写在actions中
34. 不属于Vue使用虚拟DOM的特点是（ ）
虚拟节点可以理解成节点描述对象，它描述了应该怎样去创建真实的DOM节点。
虚拟DOM优势：渲染引擎操作 DOM 慢，js运行效率高，于是将DOM对比操作放在JS层，提高效率
提升渲染性能 Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新
Virtual DOM 是以 JavaScript 对象为基础,所以必须依赖于浏览器才能运行
正确答案: D
Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等
35. 关于Vue组件生命周期说法错误的是（ ）
A.在data中的对象的某个属性和input双向绑定，修改input的值，在deforeDestroy中获取的值是修改过后的值
B.父子组件生命周期的执行顺序是父亲beforecreate、父亲created、父亲beforeMount、孩子beforecreate、 孩子created、孩子beforeMount、父亲mounted、孩子mounted、父亲beforeDestroy、孩子beforeDestroy、孩子destroyed、父亲destroyed
C.在created钩子函数中操作DOM，可以将语句放在$nextTick中
D.ajax请求可以放在created钩子函数中
正确答案: B
知识点：加载渲染过程： 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程 父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程 父beforeUpdate->父updated
销毁过程 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
36. 有如下代码，最终渲染出来的div元素的class属性值是（ ）
有如下模板：
| 1 2 3 4 | <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div> |
和如下data：
| 1 2 3 4 | data: { isActive: true, hasError: false } |
正确答案：B static active
可以通过v-bind绑定class属性，且可以通过变量控制属性值，当变量是true时，该属性会被添加到class属性中
37. 用于绑定DOM属性的指令是（ ）
v-on v-model v-bind v-html 正确答案: C
定DOM属性的指令是v-bind
38. 以下获取动态路由{ path: '/name/:id' }中id的值正确的是（ ）
this.$route.params.id this.route.params.id this.$router.params.id this.router.params.id 正确答案: A
router其实是VueRouter的一个实例，所以它是一个全局对象，包含了所有的子对象和属性
而route是正在跳转的这个路由的局部对象，可以获取这个正在跳转的路由的name，path，params，query等
this.$router 全局的路由对象，options.routes包括所有的路由路径,this.$router.push() this.$router.go()
this.$route 本页面的路由对象， 当前页的 url地址， 当前页的传参 params query
39. 下列关于Vue自定义指令钩子函数的描述错误的是（ ）
被绑定元素插入父节点时调用inserted函数
bind函数只调用一次，指令第一次绑定到元素时调用
组件的VNode更新时调用update函数
自定义指令钩子函数参数"el"指所绑定的元素，但是不可以通过el直接操作DOM元素
正确答案: D
自定义指令钩子函数参数"el"指所绑定的元素，可以直接操作DOM元素。如修改绑定元素的字体颜色：el.style.color = 'red'。
40. 关于$nextTick说法错误的是（ ）
在组件内使用vm.$nextTick()实例方法特别方便，因为它不需要全局Vue，并且回调函数中的this将自动绑定到当前的Vue实例上
在created等虚拟DOM没有完成挂载的钩子函数中，不能把操作语句放在$nextTick的回调函数中
$nextTick()返回一个Promise对象
需要使用$nextTick()原因是Vue是异步渲染
正确答案: B
在created等虚拟DOM没有完成挂载的钩子函数中，避免操作DOM报错可以把操作语句放在$nextTick的回调函数中
41. 下列关于Vue响应式的描述错误的是（ ）
当利用索引值设置一个数组项时，Vue不能检测到数组的变动
当修改数组的长度时，Vue不能检测到数组的变动
Vue可以监听对象属性的添加或删除
可以通过Vue.set()方法向嵌套对象添加响应式属性
正确答案: C
Vue无法检测property的添加或移除。由于Vue会在初始化实例时对property执行getter/setter转化，所以property必须在data对象上存在才能让Vue将它转换为响应式的。
这里应该需要说明下vue的版本在2.x的时候,在3.x的时候已经实现了深层对象和数组元素直接赋值、删除属性的响应式
由于 JavaScript 的限制，Vue 不能检测数组和对象的变化，因而对象属性的添加或删除不可以监听到。
Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在data对象上存在才能让 Vue 将它转换为响应式的
42.下列关于Vue和React的描述错误的是（ ）
Vue进行数据拦截/代理，对数据更敏感，数据驱动视图自更新，而React需要手动驱动数据更新视图
Vue和React的this都指向当前组件实例
Vue和React都能使用jsx进行编程
Vue和React都是数据驱动视图的更新
正确答案: B React中组件的this并不是当前实例，需要通过bind或箭头函数来修改指向。
43. 关于Vue中的diff算法说法错误的是（ ）
比较只会在同层级节点进行比较, 不会跨层级比较
在diff比较的过程中，循环从两边向中间收拢。
vue的虚拟dom渲染真实 dom 的过程中首先会对新老VNode的开始和结束位置进行标记：oldStartIdx、oldEndIdx、newStartIdx、newEndIdx
当老VNode节点的 start 和新VNode节点的end满足sameVnode时,新VNode节点会被提到start位置
正确答案: D
老 VNode 节点的start和新VNode节点的end满足 sameVnode 时，这说明这次数据更新后oldStartVnode已经跑到了oldEndVnode后面去了，这时候在patchVnode后，还需要将当前真实dom节点移动到oldEndVnode的后面，同时老VNode节点开始索引加 1，新VNode节点的结束索引减 1。
44. 以下属于Vue绑定事件的指令是（ ）
v-bind @ v-on 1 正确答案: B C
绑定事件有两种方式：第一种，通过v-on指令。二种，通过@语法糖
45. 下面说法错误的是（ ）
watch方法中不能执行异步操作
不应该使用箭头函数来定义 method 函数,箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向 Vue 实例
Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个 property
computed的结果会被缓存，除非依赖的响应式 property 变化才会重新计算
正确答案: A watch中能够执行异步操作
46. 关于路由守卫说法错误的是（ ）
Vue路由守卫分为全局路由、单个路由守卫、组件内部路由
全局路由守卫的钩子函数有：beforeRouteEach（全局前置守卫）、beforeRouteResolve（全局解析守卫）、afterRouteEach（全局后置守卫）
单个路由独享的钩子函数只有一个：beforeEnter
组件路由守卫相关的钩子函数：beforeRouteEnter、 beforeRouteUpdate、beforeRouteLeave
正确答案: B
全局路由守卫的钩子函数有： beforeEach（全局前置守卫）、beforeResolve（全局解析守卫）、afterEach（全局后置守卫）
#学习路径#
查看11道真题和解析
