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指令。二种，通过@语法糖(173871460)    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（全局后置守卫）