专项练习-16框架技术-03Vue-01

1.
关于Vue组件化说法错误的是（   ）
A
所谓组件化，就是把页面拆分成多个组件 (component)，每个组件依赖的 CSS、JavaScript、模板、图片等资源放在一起开发和维护
B
组件是资源独立的，组件在系统内部可复用，但是组件和组件之间不可以嵌套
C
vue的组件之间可以进行通信
D
组件化能提高开发效率，方便重复使用，简化调试步骤，提升项目可维护性，便于多人协同开发
正确答案：B
官方解析：组件是资源独立的，组件在系统内部可复用，而且组件和组件之间可以嵌套
知识点：Vue

2.
下列关于v-for说法错误的是（   ）
A
v-for指令基于一个数组来渲染一个列表
B
v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名
C
不可以用v-for来遍历一个对象的property
D
v-for在使用的时候最好添加key，且key最好不是索引
正确答案：C
官方解析：可以用v-for来遍历一个对象的property
知识点：Vue

3.
关于$nextTick说法错误的是（   ）
A
在组件内使用vm.$nextTick()实例方法特别方便，因为它不需要全局Vue，并且回调函数中的this将自动绑定到当前的Vue实例上
B
在created等虚拟DOM没有完成挂载的钩子函数中，不能把操作语句放在$nextTick的回调函数中
C
$nextTick()返回一个Promise对象
D
需要使用$nextTick()原因是Vue是异步渲染
正确答案：B
官方解析：在created等虚拟DOM没有完成挂载的钩子函数中，避免操作DOM报错可以把操作语句放在$nextTick的回调函数中
知识点：Vue

4.
下列关于webpack配置的描述错误的是（   ）
A
module.rules可以指定多个loader，而loader的作用是对模块的源码进行转换
B
plugin是一个具有apply方法的JavaScript对象，由于plugin可以携带参数，所以必须在配置中向plugins属性传入一个实例
C
模块热替换会更替所有模块，立即在浏览器中进行更新
D
webpack开始处理程序时，从入口开始递归构建一个依赖关系图，包含了程序所需的模块，然后打包为少量的bundle，通常只有一个bundle
正确答案：C
官方解析：模块热替换会在程序运行中，替换、添加、删除模块，无需重新加载整个页面，无需更替所有模块。
知识点：Vue

5.
有如下代码，最终渲染出来的div元素的class属性值是（   ）
有如下模板：
<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
和如下data：
data: {
  isActive: true,
  hasError: false
}
A
static isActive
B
static active
C
static hasError
D
isActive
正确答案：B
官方解析：可以通过v-bind绑定class属性，且可以通过变量控制属性值，当变量是true时，该属性会被添加到class属性中
知识点：Vue

6.
关于Vuex说法错误的是（   ）
A
可以使用this.$store.state获取Vuex中存储的状态
B
getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
C
更改Vuex的store中的状态的唯一方法是提交mutations中的方法
D
Actions可以包含任意异步操作, 可以直接变更状态
正确答案：D
官方解析：Actions提交的是mutations中的方法，而不是直接变更状态。
知识点：Vue

7.
下列哪个选项不是单页面应用程序（SPA）的优点（   ）
A
不需要重新加载整个页面，运行流畅
B
高效的前后端分离模式
C
有利于SEO
D
减轻服务器压力
正确答案：C
官方解析：单页面应用程序中首页的数据需要通过在服务器异步获取，在这之前首页仅仅是一个模板，不利于seo。
知识点：Vue

8.
下列关于Vue模块化开发的描述错误的是（   ）
A
代码复用性高
B
便于维护
C
增加代码之间的耦合度
D
避免命名冲突
正确答案：C
官方解析：模块化开发就是将大的文件拆分为许多独立的小文件，按需在不同的组件中导入，降低了代码耦合度，提高了代码复用性。
知识点：Vue

9.
下列关于Vue2和Vue3的描述错误的是（   ）
A
Vue3中Template支持多个根标签，Vue2不支持
B
Vue3中的生命周期的挂载钩子是onMounted，需要引入才能使用
C
Vue3组合API中的setup()方法中不可以使用生命周期钩子函数
D
Vue3引入了tree-shaking，以模块的方式引入api，减小打包体积
正确答案：C
官方解析：Vue3的组合API中的setup()方法包含了所有的基本内容，包括生命周期，可以在setup()中使用生命周期钩子函数。
知识点：Vue

10.
关于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实现数据监听
知识点：Vue

11.
关于Vue组件生命周期说法错误的是（   ）
A
Vue组件的生命周期可以分成三个大阶段：挂载、更新、卸载
B
挂载阶段中涉及到的钩子函数有：beforeCreate、created、beforeMount、mounted
C
更新阶段涉及的钩子函数有：beforeUpdate、updated、activated、deactivated
D
首次进入页面钩子函数的执行顺序：beforeCreate、created、beforeMount、mounted
正确答案：C
官方解析：Vue组件的生命周期涉及到的钩子函数和执行顺序是：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed，activated和deactivated是组件设置了keep-alive时，进入组件和离开组件时分别触发的两个函数
知识点：Vue

12.
关于Vue组件的生命周期说法错误的是（   ）
A
mounted钩子函数中，可以直接获取DOM元素
B
beforeMount钩子函数中，不可以直接获取DOM元素
C
beforeDestroy钩子函数中，不可以直接获取DOM元素
D
destroyed钩子函数中，不可以直接获取DOM元素
正确答案：C
官方解析：Vue的生命周期的钩子函数中mounted和beforeDestroy中都可以获取到DOM元素
知识点：Vue

13.
关于Vue-cli说法错误的是（   ）
A
Vue CLI是一个基于Vue.js进行快速开发的完整系统
B
CLI(@vue/cli) 是一个全局安装的npm包，提供了终端里的Vue命令
C
CLI目前还不能提供图形化界面管理你的所有项目
D
CLI服务是构建于webpack和webpack-dev-server之上的
正确答案：C
官方解析：可以通过vue ui一套图形化界面管理你的所有项目
知识点：Vue

14.
关于Vue组件间通信说法错误的是（   ）
A
Vuex可以实现任何关系的组件间的通信
B
如果子组件修改，通过props获取的父组件传过去的字符串或数字会报错
C
子组件可以通过$emit给父组件传值
D
可以通过context进行组件间传值
正确答案：D
官方解析：context是用在react中进行组件间的传值，vue并不提供该方法，Vue组件间传值可以通过props，$emit,Vuex,事件总线。通过props获取父组件的基本数据类型的值，在修改时会报错
知识点：Vue

15.
不属于Vue使用虚拟DOM的特点是（   ）
A
虚拟节点可以理解成节点描述对象，它描述了应该怎样去创建真实的DOM节点。
B
虚拟DOM优势：渲染引擎操作 DOM 慢，js运行效率高，于是将DOM对比操作放在JS层，提高效率
C
提升渲染性能 Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新
D
Virtual DOM 是以 JavaScript 对象为基础,所以必须依赖于浏览器才能运行
正确答案：D
官方解析：Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等。
知识点：Vue

16.
下面说法错误的是（   ）
A
watch方法中不能执行异步操作
B
不应该使用箭头函数来定义 method 函数,箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向 Vue 实例
C
Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个 property
D
computed的结果会被缓存，除非依赖的响应式 property 变化才会重新计算
正确答案：A
官方解析：watch中能够执行异步操作
知识点：Vue

17.
关于Vuex说法错误的是（   ）
A
actions通过commit触发mutations中的方法进行状态变更
B
Vuex是单项数据流变更数据
C
ajax一般放在mutations中，把获取到的数据存储state中
D
由于Vuex使用单一状态树，应用的所有状态会集中到一个比较大的对象
正确答案：C
官方解析：异步操作放在actions中，actions通过commit调用mutations中方法操作state
知识点：Vue

18.
Vue 中通过给元素添加哪个属性绑定DOM元素（   ）
A
ref
B
refs
C
$ref
D
$refs
正确答案：A
官方解析：给元素添加ref属性，通过this.$refs获取
知识点：Vue

19.
在Vue中，下列哪个选项对数组的操作不会触发视图的更新（   ）
A
push()
B
shift()
C
concat()
D
reverse()
正确答案：C
官方解析：concat()返回一个新的数组，还需要用新数组替换原数组才能实现视图的更新。
知识点：Vue

20.
关于Vuex说法错误的是（   ）
A
Vuex可以用来管理数据
B
Vuex也可以实现组件间的传值
C
Vuex的属性有state、mutations、actions、setters等
D
mutation中的方法按照规定最好不要涉及异步方法
正确答案：C
官方解析：Vuex的属性有state、mutations、actions、getters、module等
知识点：Vue

21.
现有以下代码，打印的结果是（   ）
new Vue({
  data: { a: 1, b: 2 }, 
  watch: {
    a: {
      handler: function(value){
        console.log(value)
      }
    }
  }
})

A
1
B
打印语句不执行
C
undefined
D
null
正确答案：B
官方解析：watch在不添加immediate: true属性时，默认是不监听第一次赋值，watch未触发
知识点：Vue

22.
下列关于Vue响应式的描述错误的是（   ）
A
当利用索引值设置一个数组项时，Vue不能检测到数组的变动
B
当修改数组的长度时，Vue不能检测到数组的变动
C
Vue可以监听对象属性的添加或删除
D
可以通过Vue.set()方法向嵌套对象添加响应式属性
正确答案：C
官方解析：Vue无法检测property的添加或移除。由于Vue会在初始化实例时对property执行getter/setter转化，所以property必须在data对象上存在才能让Vue将它转换为响应式的。
知识点：Vue

23.
关于Vue中的diff算法说法错误的是（   ）
A
比较只会在同层级节点进行比较, 不会跨层级比较
B
在diff比较的过程中，循环从两边向中间收拢。
C
vue的虚拟dom渲染真实dom的过程中首先会对新老VNode的开始和结束位置进行标记：oldStartIdx、oldEndIdx、newStartIdx、newEndIdx
D
当老VNode节点的start和新VNode节点的end满足sameVnode时,新VNode节点会被提到start位置
正确答案：D
官方解析：老 VNode 节点的start和新VNode节点的end满足 sameVnode 时，这说明这次数据更新后oldStartVnode已经跑到了oldEndVnode后面去了，这时候在patchVnode后，还需要将当前真实dom节点移动到oldEndVnode的后面，同时老VNode节点开始索引加 1，新VNode节点的结束索引减 1。
知识点：Vue

24.
关于路由守卫说法错误的是（   ）
A
Vue路由守卫分为全局路由、单个路由守卫、组件内部路由
B
全局路由守卫的钩子函数有：beforeRouteEach（全局前置守卫）、beforeRouteResolve（全局解析守卫）、afterRouteEach（全局后置守卫）
C
单个路由独享的钩子函数只有一个：beforeEnter
D
组件路由守卫相关的钩子函数：beforeRouteEnter、 beforeRouteUpdate、beforeRouteLeave
正确答案：B
官方解析：全局路由守卫的钩子函数有： beforeEach（全局前置守卫）、beforeResolve（全局解析守卫）、afterEach（全局后置守卫）
知识点：Vue

25.
关于路由模式说法错误的是（   ）
A
vue-router有两种模式，history和hash模式
B
hash模式是通过onchange事件，监听url的修改
C
history通过H5提供的API history.pushState 和 history.pushState实现跳转且不刷新页面
D
history模式需要后端进行配合
正确答案：B
官方解析：hash模式是通过onhashchange事件，监听url的修改
知识点：Vue

26.
下列关于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相同，图片不刷新。
知识点：Vue

27.
请按顺序选择正确的代码，实现图片预加载功能（   ）
<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>
A
onload、of、this.preload、count
B
this.preload、in、onload、percent
C
this.preload、of、onload、count
D
onload、in、this.preload、percent
正确答案：C
官方解析：挂载时，调用preload方法，使用of获取数组每项，图片加载成功时触发onload事件，观察count，当count等于数组长度时，代表全部加载完毕，进行跳转。
知识点：Vue

28.
现有以下代码, 打印的结果是（   ）
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
官方解析：由于Vue实例没有执行DOM挂载，所以不会执行mounted钩子函数
知识点：Vue

29.
下列哪些是Vue的特性（   ）
A
轻量级
B
双向数据绑定
C
组件化
D
数据驱动视图
正确答案：ABCD
官方解析：Vue的特性有轻量级、双向数据绑定、组件化、数据驱动试图、指令、过滤器、路由、计算属性等。
知识点：Vue

30.
以下属于Vue绑定事件的指令是（   ）
A
v-bind
B
@
C
v-on
D
1
正确答案：BC
官方解析：绑定事件有两种方式：第一种，通过v-on指令。二种，通过@语法糖
知识点：Vue