当前位置：首页 > news >正文

GDPU Vue前端框架开发期末赛道出勇士篇（更新ing）

news 2025/6/27 5:10:47

记住，年底陪你跨年的不会仅是方便面跟你的闺蜜，还有孑的笔记。

选择题

1.下列选项用于设置Vue.js页面视图的元素是（）。

A. Template

B. script

C. style

D. title

2.下列选项中能够定义Vuejs根实例对象的元素是（）。

A. template

B. script

C. style

D. title

3.下列选项中不是Vuejs常用的选项是（）。

A. el

B. data

C. methods

D. function

4.定义Vuejs的根实例，需要使用的运算符是（）。

A. delete

B. var

C. new

D. typeof script

5.MVVM模式中VM是指（）。

A. View

B. Model

C. Controller

D. ViewModel

6.下列选项中插值不正确的是（）。

A. {{text}}

B. {{message.join(",")}}

C. {{3*x+35}}

D. {{var x=35}}

7.下列选项能够实现绑定HTML代码的指令是（）。

A. v-html

B. v-model

C. v-text

D. v-bind

8.下列选项能够实现绑定属性的指令（）。

A. v-html

B. v-once

C. v-bind

D. v-model

9.下列选项能够动态渲染数据属性的是（）。

A. computed

B. watch

C. methods

D. el

10.能够在控制台显示对象的方法是（）。

A. console.log()

B. console.dir()

C. console.error()

D. console.table()

11.能够在控制台显示节点的内容的方法是（）。

A. console.dirxml()

B. console.warn()

C. console.error()

D. console.dir()

12.下列选项中不能够触发数组元素更新的方法是（）。

A. Push()

B. shift()

C. reverse()

D. slice(1)

13.下列选项表示绑定属性的语法糖定义正确的是（）。

A. :value=’valueA'

B. v-bind:key='user-name'

C. @value='valueA'

D. v-on:click='adds’

14.下列按键修饰符中表示按下回车键的是（）。

A..tab

B..enter

C..ctrl

D..shift

15.下列事件修饰符中能够阻止事件冒泡的是（）。

A..passive

B..capture

C..stop

D..once

16.以下v-model修饰符能够将字符型数据转换为数值型数据的是（）。

A..number

B..trim

C..lazy

D.所有选项都是

17.下列指令能够实现标记内容原样输出的是（）。

A. v-bind

B. v-html

C. v-text

D. v-pre

18.下列指令只渲染1次的是（）。

A. v-html

B. v-pre

C. v-once

D. v-on:click.once

19.下列指令中能够捕获事件的指令是（）

A. v-on

B. v-for

C. v-if

D. v-model

20.下列指令能够与元素的属性进行绑定的指令是（），

A. v-html

B. v-bind

C. v-model

D. v-cloak

1.父组件中绑定message="[A'，B，C',D]"传递给子组件，在子组件中显示message.length的值是（）。

A. 8

B. 4

C. 15

D. 17

2.父组件向子组件传递数据时，子组件可以通过（）属性来声明使用父组件的变量。

A. data

B. name

C. C.

D. props

3.在父组件上使用（）指令来监听事件，子组件中可以使用this.$emit（“input',this.子组件属性)。

A. v-model

B. v-on

C. v-for

D. v-bind

4.具名插槽是给slot元素设置（）属性来设置。

A. class

B. slot-scope

C. name

D. slot

5.父组件通过某个元素的（）属性可以将数据信息传递至指定的具名插槽中。

A. name

B. slot

C. v-slot

D. slot-scope

6.一个单文件组件是由（）、script、style等3个标记（元素）组成。

A. slot

B. p

C. div

D. template

13.Nodejs在执行JavaScript任务时一般采用处理方式是（）

A.多线程

B.单绒程

C.多进程

D.单进程

14.Nodejs的模块采用规范是（）。

A. AMD

B. ES Module

C. CommonJS

D. 都不是

15.Nodejs导入模块是（）

A. require0

B. exports

C. path

D. url

16.Nodejs中能够用来搭建HTTP服务器和客户端的模块是（）。

A. path

B. exports

C. require

D. http

17.http模块中写响应头的方法是（）。

A. response.writeHead()

B. response.write()

C. response.end()

D. request.end()

18.npm中查看已安装各模块之间的依赖关系图的命令是（）。

A. npm -v

B. npm list

C. npm init

D. npm install

19.npm指令中用于卸载模块指令是（）。

A. npm -v

B. npm init

C. npm uninstall

D. npm update

20.下列选项中表示Vuex的核心概念状态的是（）。

A. store

B. state

C. actions

D. module

1.下列选项中表示Vuex的核心概念模块的是（）。

A. store

B. mutations

C. modules

D. actions

2.Vuex中相当于state的计算属性的核心概念是指（）。

A. getters

B. actions

C. modules

D. mutations

3.在main.js中显式地使用Vuex的方法是（）。

A. Vue.use(Axios)

B. Vue.use()

C. Vue.use(Router)

D. Vue.use(Vuex)

4.将默认导出的store对象注册到根实例中，可通过Vue的（）选项来实现。

A. store

B. el

C. template

D. components

5.在辅助函数前面加上（），可以实现Vuex状态与局部计算属性混合使用。

A. /

B. ...

C. +

D. -

6.下列选项中，能够正确分发Action触发increment这个mutation的指令是（）。

A. store.commit(‘increment’)

B. dispatch(‘increment’)+

C. store.dispatch(increment')

D. commit(increment')

9.在VueRouter中必须显式地使用Router，下列选项中正确的使用方法是（）。

A. Vue.use(Vuex)

B. Vue.use()

C. Vue.use(Router)

D. Vue.use(axios)url

10.下列选项中，能够正确表达跳转到/user/chu的路由是（）。

A. {path:‘user/’,component:User)]

B. {path:’/’,component:User]

C. {path:'user/:chu',component:User)

D. {path:'user/:id 'component:User}

11．定义命名路由，使用的属性名称是（）。

A. name

B. path

C. query

D. components

12.在编程式导航中，能够跳转到新的路由且在历史记录中添加一条新记录的方法是（）

A. router.back()

B. router.push()

C. router.replace()

D. router.go(n)npm install

13.下列选项中，能够载入Vuejs的标记是（）。

A. <script></script>

B. <style><style>

C. <head><head>

D. <meta>

14.下列描述错误的是（）。

A.Vuejs是一套用于构建用户界面的渐进式框架。

B.Vuejs的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

C.Vue不可以用来构建单页应用。

D.当与现代化的工具链以及各种支持类库结合使用时，Vuejs也完全能够为复杂的单页应用SPA(SinglePageApplication)提供

15.下列选项中用来设置页面的行为（）。

A. JavaScript

B. HTML

C. CSS

D. DOM

16.以下（）软件不是用来开发Web前端页面。

A. Hbuilder X

B. VS Code

C. Sublime Text

D. Eclipse

17.<template>标记的作用是（）。

A.插入原始数据

B.声明内容模板元素

C.定义各种方法函数

D.实现数据监听

18.Vue的数据驱动是通过（）模式来实现的。

A. MVC

B.单例模式

C.建造者模式

D. MVVM

19．下列插值不正确的是（）。

A. {{a}}

B. {{if(x>10){max=x}}}

C. {{5+5*3}}

D. {{arr.split(“”)}}

20.以下代表视图部分的选项是（）鸟瞰图

A. View

B. Model

C. DOM侦听数据绑定

D. Controller

1.下列（）指令可以实现在文本输入框上的双向数据绑定。

A. v-once

B. v-for

C. v-html

D. v-model

2.下列选项中不属于前端框架的是（）

A. Angular

B. React

C. Vue.js

D. Spring

3.以下（）指令用于绑定属性。

A. v-bind

B. v-once

C. v-for

D. v-show

4.以下（）指令用于绑定html代码。

A. v-bind

B. v-once

C. v-show

D. v-html

5.computed和methods中使用this时指的是（）。

A.Vue实例本身

B.包含this的函数

C.computed本身

D.函数的返回结果

6.以下关于computed描述不对的是（）

A.计算属性中可以定义多个方法

B.computed必须配置在vue实例内

C.computed需要通过事件驱动

D.computed是实时响应的

7.以下关于computed和methods描述不正确的是（）

A.computed是属性，methods是方法

B.需要传参数的情况可以使用computed

C.依赖型数据可以使用computed属性进行计算

D.methods中的方法需要事件驱动来调用

8.Vue实例中进行数据异步修改优先使用（）配置属性。

A. computed

B. methods

C. watch

D. data

9.如果要设置深度侦听，可以将下列（）属性值设置为true。

A. immediate

B. deep

C. total

D. high

10.以下可以实现为按钮绑定单击事件的语句是（）。

A.<button $click=”showMsg”></button>

B.<button @click=”showMsg”></button>

C.<button #click=”showMsg”></button>

D.<button %click=”showMsg”></button>

11.以下（）钩子函数在组件销毁前触发。

A. Updated

B. Created

C. beforeDestroy

D. mounted

12.以下（）钩子函数在data更新前触发。

A. updated

B. beforeUpdated

C. destroyed

D. beforeCreated

13.控制台中用来显示信息的命令是（）

A. console.trace

B. console.table

C. console.log()

D. console.profile

14.以下描述不正确的是（）。

A.Vue实例被创建后，View视图会产生响应，匹配data中更新的数据。

B.Vue实例中的所有数据都是响应式的。

C.data默认拥有setter和getter属性。

D.通过Vue.setO方法可以添加新的响应式属性。

15.以下关于Vue.set(target,propertyName/index,value)描述错误的是（）

A.target可以是对象或者数组

B.propertyName/index可以是字符串或者数值型

C.value可以是任意值

D.Vue.set(）添加的属性不是响应式的。

16.以下不属于数组变异方法的是（）

A. push()

B. unshift()

C. filter()

D. pop()

17.以下关于filters描述不正确的是（）。

A.过滤器只能定义在Vue实例内部

B.局部过滤器中可以定义多个方法

C.过滤器不能替代computed、methods、watch

D.过滤器不会改变真正的数据，只有改变渲染的结果

18.下列选项中表示监听单击事件语法糖定义正确的是（）。

A. :value='valueA'

B. v-bind:key='user-name'

C. @value='valueA'

D. @click=’add’

19.下列按键修饰符中表示按tab键的是（）。

A..tab

B..enter

C..alt

D..ctrl

20.下列关于条件渲染指令描述不正确的是（）。

A.用于条件性地渲染一块内容。当指令的表达式的值为true时，内容被渲染

B.使用v-else指令，需要紧跟在v-if或者v-else-if后面，否则不起作用

C.v-else搭配v-if可以实现switch语句的功效

D.v-else-if可以充当v-if的else-if块，可以链式的使用多次，以实现switch语句的功效

1.下列关于key的说法正确的是（）。

A.Vue每次都是重新开始渲染

B.Vue在切换input时会清除里面的数据

C.在Vue中使用key管理可复用元素

D.input添加了key属性后，用户在切换input时，里面的数据不会被清除

2.v-show属性的值是（）。

A.布尔值

B.整型

C.浮点型

D.字符串

3.下列关于for遍历语法正确的是

A. <li v-for=”shopping on shoppings”>

B. <li v-for=”(shopping, index) in shoppings”>

C. <li v-for=”(key,index) on array”>

D. <p v-for=”user on students” v-bind:value=’user.id’>

4.下列能够实现属性绑定的是（）

A. v-bind

B. v-for

C. v-if

D. v-show

5.下列能够阻止事件冒泡的修饰符是（）。

A..passive

B..capture

C..stop

D..once

6.下列选项中，可以让事件只会触发一次的修饰符是（）。

A..once

B..stop

C..self

D..prevent

7.在下列选项中，等同于JavaScript中的event.preventDefault()的修饰符是（）。

A..prevent

B..stop

C..once

D..self

8.下列指令执行结果相当于元素的innerHTML属性的是（）。

A. v-bind

B. v-html

C. v-text

D. v-pre

9.下列选项中，能够捕获事件的指令是（）。

A. v-on

B. v-for

C. v-if

D. v-model

10.内置指令中能够隐藏未编译的元素的指令是（）。

A. v-model

B. v-bind

C. v-cloak

D. v-html

11.表单中，关于v-model数据绑定错误的是（）。

A.单个复选框，绑定到布尔值

B.多个复选框，绑定到同一个数组，同时给每个复选框设置不同的id值和value值

C.列表框单选时，绑定到一个变量。多选时，绑定到一个数组

D.单选按钮，绑定到一个数组

12.下列修饰符中，表示将输入域中内容转换为数值型数据的是（）。

A. v-model.number

B. v-model.lazy

C. v-model.trim

D. 以上都不是

13.使用（）方法定义的指令为全局自定义指令？

A. Vue.directive()

B. Vue.filter0

C. Vue.set()

D. directives:{ my-directive:()}

14.Vue.js中，（）钩子函数可以在被绑定元素插入父节点时调用。

A. componentUpdated

B. update

C. inserted

D. bind

15.自定义指令时，钩子函数的参数binding中。（）属性代表字符串形式的指令表达式。

A. name

B. expression

C. oldValue

D. value

16.下列代码中，为了实现输入框和Vue实例双向数据传递，空格处的指令是（）。

</div>

var vm = new Vue({

el:“#app”

data: {

msg:双向数据传递

}

})

</script>

A. v-bind

B. v-once

C. v-for

D. v-model

17.下列指令相当于innerText的是（）。

A. v-text

B. v-html

C. v-if

D. v-once

18.父组件中插入子组件<my-compossage="[E','F','G']”></my-component>,，在子组件中显示message.length的值为（）。

A. 13

B. 11

C. 14

D. 3

19.父组件向子组件传递数据，子组件可以使用以下（）选项来获取数据。

A. v-model

B. v-on

C. props

D. $slot

20.下列代码中横线处应该使用（）来引用组件myComponent。

</div>

Vue.component('myComponent',{

data (){

return{

count: 0

}

template:'<button v-on:click="count++">被单击{{count}}次</button>’

})

var vm = new Vue({

el:’#app’,

})

</script>

A.<mycomponent></mycomponent>

B. <my-component></my-component>

C. <myComponent></myComponent>

D. <MyComponent></MyComponent>

1.使用Vue.component(tagName，options）定义的组件属于()注册方式

A.普通注册

B.局部注册

C.一般注册

D.全局注册

2.子组件使用this.$emit（‘input’，this子组件属性）向父组件传值时，父组件中应该使用（）指令来监听。

A. v-bind

B. v-on

C. v-for

D. v-model

3.自定义事件中，子组件用（）来触发自定义事件，父组件使用$on（）来监听子组件的事件。

A. $on

B. $emit()

C. $render

D. $parent

4.组件中的data选项必须定义为（）

A.数组

B.对象

C.函数(data(){})

D.字符串

5.要动态地绑定父组件的数据到子组件的props，需要使用（）指令。

A. v-model

B. v-bind

C. v-for

D. v-on

6.props选项的（）类型可以用于对外部传递进来的参数进行数据验证。

A.数组

B.对象

C.函数

D.布尔

7.兄弟组件间通信时，通过事件总线（var bus=new Vue())来完成发送和接收消息。其中：bus.$emit()在组件中通过自定义事件来()消息。

A.接收

B.拒绝

C.同步

D.发送

8.在子组件中可以通过父链（this.$parent）来( )。

A.修改子组件数据

B.获取或修改父组件数据

C.修改兄弟组件数据

D.修改孙组件数据

9.没有命名、有目只有一个插槽称为默认插槽default或称为( )。

A.作用域插槽

B.具名插槽

C.匿名插槽

D.普通插槽

10.在子组件中，具名插槽是通过slot元素的（）属性进行设置，在父组件中通过标记的（）属性或template标记的v-slot:slotname来实现。

A. class, name

B. slot-scope,slot

C. name,slot

D. slot,name

11.父组件通过某个元素的（）属性可以将数据信息传递至指定的具名插槽中。

A. name

B. slot

C. v-slot

D. slot-scope

12.一个单文件组件由（）、<script>、<style>等3个标记组成。

A. <slot>

B. <p>

C. <div>

D. <template>

3.动态组件需要通过Vue中的<component>元素绑定（）属性来实现多组件的过渡。

A. v-for

B. v-model

C. key

D. is

4.动态渲染整个列表，需要使用()指令去遍历所有的列表项。

A. v-bind

B. key

C. v-move

D. v-for

8.使用下列选项中（）命令可以检查npm的安装版本信息。

A. node -version

B. npm -version

C. npm -v

D. node -v

9.加载（导入）其它模板可以使用方法是（

A.node

B.import

C.exports()

D.require()

10．导入http原生模块正确的语句是（

A. require(‘http’)

B. var http=require(‘http’);

C. var http=require(‘./http’)

D. var http=require(../http)

11.以下关于exports对象描述错误的是（）

A.Node.js为每一个模块提供一个exports变量，这个变量指向module.exports。

B.在对外输出接口时，可以向exports对象添加方法，如exports.add=function（）{}。

C.可以直接给exports赋值一个变量，如exports=function（）{}。

D.exports对象是当前模块的导出对象，用于导出该模块的公有方法和属性。

12.下列选项中，用于显示module对象的模块对外输出的值是（

A.module.filename

B.module.loaded

C.module.exports

D.module.children

13.下列选项中，表示启动服务器监听的方法是（

A. var http=require(‘http’);http.createServer().listen(8080);

B. server.on()

C. server.on(‘request',function(request,response){...})

D. response.end(‘信息显示在页面上’)

14.下面选项中，属于命令行工具的是（）

A. cmdea

B. cmd

C. calc

D. huilderx

15.Chorme浏览器所使用的JavaScript引|擎是（）

A. Chrome v8

B. Nitro

C. Linear A

D.查克拉

16.request对象属性中用于封装HTTP请求的方法的是（

A. url

B. method

C. headers

D. host

17.packagejson文件中用于描述包的依赖的属性是（）

A. version

B. description

C. keywords

D. dependencies

20.安装的依赖包的版本、名称、下载地址等信息在下列（）文件中。

A. package-lock.js

B. package.js

C. package.json

D. package-lock.json

1.在npm命令中，能够查看配置信息的命令是（）

A. npm info

B. npm config list

C. npm view

D. npm help

2.下列选项中能够设置路由导航的组件是（）

A. router-view组件

B. router-link组件

C. transition组件

D. transition-group组件

3.下列选项中能够设置路由出口（渲染路由组件）的组件是（）

A. transition组件

B. transion-group组件

C. router-view组件

D. router-link组件

4.全局安装vue-router插件正确的命令是（）

A. npm install vue-router -S

B. npm install vue-router -D

C. npm i vue-router

D. npm install vue-router -g

5.定义命名路由时，可以在路由route中使用（）属性来定义。

A. name

B. path

C. component

D. redirect

6.当前路由对象中（）属性会保存当前路由的路径，总是解析为绝对路径。

A. this.Sroute.query

B. this.Sroute.path

C. this.Sroute.params

D. this.$Sroute.fullPath

7.以下说法错误的是（)。

A.route：它是一条路由，使用(...)来定义，通常会包含两个属性，分别是path、component,实现路由与组件的映射。

B.routes：它是一组路由，把每一条条路由组合起来，形成一个数组，也称为路由表，类似于[route1,route2...]。

C.router-link：表示路由出口。该组件用于将匹配到组件（相当于链接的页面）渲染在这里。

D.router：它是路由管理器，用来管理路由。当用户点击导航时，路由器会到routes中去查找，去找到对应的路由组件，页面中就显示对应组件的内容。

8.在一个路由中设置多段“路径参数”，对应的值都会设置到（）中。

A. $route.params

B. $route.query

C. $route.path

D. $route.name

9.以下选项中，不能把路由导航到/user/123路径是（）。

A. router.push( name: ‘user', params: {userld: “123")

B. <router-link :to={name: user', params: { userld:“123' } >登录</router-link>

C.router-link to="/user/123">登录</router-link>

D. router-link to="/user” params: {userld: 123 }>登录</router-link>

10.vue-router默认路由模式是（）

A.hash(#)

B.history模式

C.其他模式

D.default模式

11.下列选项中，能够实现项口初始化，并创建packagejson的命令是（）

A. npm run dev

B. npm init -y

C. npm init serve

D. npm run serve

12.下列选项中，能够设置子路由的属性是（）

A. path

B. name

C. children

D. component

13.在设置多出口路由时，可以使用命名视图，通过设置router-view组件的（）属性来定义。

A. name

B. id

C. component

D. class

14.在路由组合中定义命名视图，需要在route中通过（）属性来注册多个路由组件。

A.component

B.components

C.path

D.children

15.在定义路由组件传参时，如果使用布尔模式的props传值，需要在路由中设置（），同时在路由组件中使用props属性来传值。

A. props

B. props:false

C. props:true

D. path:’/usr/userld’

16.路由组件传值时，使用props为对象，在路由组件中需要将props属性定义为（）类型。

A.数值型

B.布尔型

C.字符串数组

D.对象型

17.在路由中定义别名，可以使用的属性（）

A. redirect

B. alias

C. name

D. path

18.在编程式导航中，（）方法可以实现回退一条历史记录。

A. router.push（）

B. router.replace（）

C. router.forward（）

D. router.back（）

19.在编程式导航，实现“返回首页”，并与router.push(Home)相同功能的选项是（）。其中：首页组件名为Home,路径为/home。

A. router.go(1)

B. router.goHome（）

C. router.push(path:’/home')

D. router.repace(path:’/home')

20.在定义子路由时，通常不需要在子路由的path属性中添加（）,而是直接书写子组件名称。

A.”.”

B.”()”

C.”\”

D.”/”

1.通常采用vuecreatevue-router-5创建项目，选择需要VueRouter后，生成的有关路由的配置文件保存的路径为（）

A. src/router/index.js

B. src/index.js

C. views/index.js

D. main.js

2.下列选项中表示Vuex的核心的是（）

A. store

B. state

C. actions

D. mutation

3.Vuex中共享状态数据存储在下列（）的核心对象中。

A.store

B.state

C.getter

D.mutation

4.从组件中提交一个mutation（type:increment）正确的方法是（）

A.store.commit(increment')

B.this.store.commit(increment)

C.this.$store.commit(increment')

D.this.store.dispatch(increment')

5.Vuex通过在根实例中注册（）选项，将状态注入到根组件下的所有子组件中，且子组件能通过this.$store访问到。

A. store

B. el

C. template

D. components

6.更改Vuex的store中的状态的唯一方法是（）

A.直接给store.state.count赋值

B.在组件中直接给this.$store.state.count赋值

C.修改getter中赋值

D.以上都不是

7.安装vuex插件的命令是（）

A. npm i vue-router -D

B. npm i vuex -D

C. npm i webpack -D

D. vue create proname

8．创建vuex实例对象的语句是（）

A. new Vuex({})

B. new Vuex.Store({})

C. new Store（）

D. new Vue({})

9.Vuex中能够触发mutation函数，从而修改状态，支持异步的对象是（）

A.state

B.mutation

C.getter

D.action

10.可以实现mutations中事件处理函数状态提交的选项是（）

A.commit

B.dispatch

C.action

D.go

11.mutations中的事件处理函数可以接受（）作为参数，即初始数据。

A.actions

B.getter

C.state

D.module

12.以下代码执行后的结果是（{

const store = new Vuex.Store({

state:{name:'ChuJiuliang1'},

mutations:{

changeName(state){

state.name=state.name.slice(0,3)+"Ming"

}

}）

store.commit('changeName')

console.log(store.state.name)

A. ChuJiuliang1

B. ChuMing

C. State

D. 以上都不对

13.以下选项中不属于状态自管理应用的是（）

A. State

B. View

C. Actions

D. mutations

14.以下代码中的this指的是（

<p>{(this.$store.state.name))</p>

</div>

var store = new Vuex.Store(f

state:{name:‘store’})

)

var vm =new Vue({el:‘#app'store})

</script>

A. vue实例

B. store实例

C. router实例

D. 以上都不是

15.下面选项中，可以用来创建vue项目的命令(@vue/cliV3.x)的是（）

A. vue create projectname

B. vue init webpack proname

C. npm run dev

D. npm run serve

16.下列说法不正确的是（）

A.Vuex的状态存储是响应式的，当store中数据状态发生变化，那么页面中的store数据也发生相应变化。

B.this.$router.state可以获取到store中的state数据

C.改变store中的状态的唯一途径就是显式地提交mutation

D.每一个Vuex应用的核心就是store（仓库），即响应式容器

17.在项目的main.js文件中createApp(App).use(store).use(router).

mount(#app）这种调用方式称为（）

A.链式调用

B.顺序调用

C.随机调用

D.复合调用

18.下列选项中，可以启动用vuecreatevue3-1项目的命令是（）。

A. npm run serve

B. npm run dev

C. npm run start

D. npm run web

19.下列命令中，能够使用vue-cli3创建项目的是（）。

A. vueinit webpack‘项目名’

B. vue create“项目名称”

C. npm install --global vue-cli

D. npm install vue@cli

20.Vue3.0中组件内部暴露出所有的属性和方法的统一API的选项是（）

A. ref（）

B. reactive（）

C. setup（）

D. toRefs（）

1.对于watchEffect来说，可以将watchEffect(返回值赋给stop，然后可以使用（）可以清除依赖实现停止监听。

A. stopwatch（）

B. esc（）

C. clear（）

D. stop（）

2.Vue3.0中使用（）创建路由管理器。

A.new Router

B.createRouter

C.new route

D.createrRoute

3.Vue3.0在setup函数中，使用下列（）语句可以实例化路由。

A.const router = useRouter（）:

B.const router = new Router（）:

C.const router = createRouter（）:

D.以上都不对

4.Vue3.0在setup函数中，可以使用（）语句来定义store实例。

A. const store = Store（）;

B. const store = useStore（）;

C. const store = new Store（）;

D.以上都不对

5.Vue3.0中在实例挂载完毕时使用的钩子函数是（）

A.SetUp

B.onBeforeMount

C.onMounted

D.onBeforeUnmount

6.当使用组合式APl时，reactive、refs和template refs的概念已经是统一的。为了获得对模板内元素或组件实例的引用，可以像往常一样在（）中声明一个ref对象并返回它。

A. function()

B. set()

C. setup()

D. methods()

简答题

MVVM，在计数器案例中，哪个体现了Model？View？以及ViewModel？

Model：是数据模型，data选项中定义的，counter，

View：是视图展示，div中定义的id=‘app’的部分

ViewModel：分离view和model，又能实现程序逻辑，methods中定义的function：add和sub

Vue中组件的作用？

1.复用，减少代码工作量

2模块化，便于分工

let、const、var定义变量的区别是什么？

（1）let 和 const为块作用域，仅在声明它们的代码块内有效。var为函数作用域或全局作用域，定义在函数内部的变量在函数外不可访问。

（2）const和let没有变量提升，且定义的变量只在let命令所在的代码块生效，在定义之前使用，会报错。var变量会被提升，在全局范围内都有效，且可在变量定义之前使用。

（3）const和let在同一作用域内，不能重复声明同一个变量。var允许重复声明。

（4）let 和var可以只声明，不赋值。const只能定义一个只读的常量，定义后不能再改变，不允许只声明不赋值。

（5）为了安全，大部分情况下var可以用let来替代,尤其是for循环中定义循环变量，使用let可以避免变量污染。定义常量使用const。

rest 参数和 arguments 对象有什么区别？

（1）rest 参数使用 ... 语法，只在函数定义中使用，能够将多个参数收集为一个数组，并且只包含那些没有对应形参的实参。

（2)arguments 对象是一个类数组，包含所有传入的参数，但它并不是数组，因此不能直接使用数组方法。

（3）rest 参数可以与默认参数一起使用，而 arguments 对象则不支持。

（4）arguments 对象还有一些附加属性，如 callee 属性。

箭头函数中this指向的规则是什么？

箭头函数中的this指向根据当前执行上下文的变化而变化，遵循谁调用就指向谁。没找到直接调用者，则this指的是全局对象window。在严格模式下，没有直接调用者的函数中的this是undefind。使用call,apply,bind绑定，this指的是绑定的对象。嵌套函数中的this不会继承外层函数的this值。

v-model就是什么？怎么使用？使用vue时html标签怎么绑定事件？

原理：v-model本质上是一个语法糖。例如应用在输入框上，就是value属性和input事件的合写。

作用：提供数据的双向绑定

数据变，视图跟着变 :value

视图变，数据跟这变 @input

注意：$event用于在模板中获取事件的形参。

Vue使用"on"可以绑定事件的原因是因为Vue采用了事件代理的方式进行事件处理。在普通的HTML中，我们通常会使用addEventListener()方法来给元素绑定事件，例如：element.addEventListener('click',handler)。这种方式需要分别为每个元素添加事件监听器，当页面中的元素较多时，会造成性能问题。而Vue采用了事件代理的方式，即通过在根元素上添加事件监听器来统一管理所有事件。在Vue中，我们可以通过v-on指令来绑定事件，例如：v-on:click="handler"。在Vue内部，当元素上触发了对应的事件后，会根据事件类型进行事件分发，找到对应的事件处理函数进行处理。

vue自定义指令如何实现的，它有哪些钩子函数？还有哪些钩子函数参数？

定义方式：全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。组件内定义指令：directives

钩子函数：

// 在绑定元素的 attribute 前

// 或事件监听器应用前调用

created(el, binding, vnode) {

// 下面会介绍各个参数的细节

// 在元素被插入到 DOM 前调用

beforeMount(el, binding, vnode) {},

// 在绑定元素的父组件

// 及他自己的所有子节点都挂载完成后调用

mounted(el, binding, vnode) {},

// 绑定元素的父组件更新前调用

beforeUpdate(el, binding, vnode, prevVnode) {},

// 在绑定元素的父组件

// 及他自己的所有子节点都更新后调用

updated(el, binding, vnode, prevVnode) {},

// 绑定元素的父组件卸载前调用

beforeUnmount(el, binding, vnode) {},

// 绑定元素的父组件卸载后调用

unmounted(el, binding, vnode) {}

钩子函数的参数有：

el: 指令所绑定的元素，可以用来直接操作 DOM 。

binding: 一个对象，包含以下属性：

name: 指令名。

value: 指令的绑定值。

oldValue: 指令绑定的前一个值。

expression: 绑定值的表达式或变量名。

arg: 传给指令的参数。

modifiers: 一个包含修饰符的对象

vnode: Vue 编译生成的虚拟节点。

oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

计算属性与watch的区别?试着举出3个及以上区别。

(1)执行顺序上有一些细微差别，dom加载完成后将立即执行计算属性computed，再执行watch。

(2)计算属性computed有缓存，watch没有缓存。

(3)watch是更通用的响应数据变化的属性，如果数据变化是异步的，用watch较合适，而计算属性适合做筛选，不可异步。

(4)计算属性在调用时需要在模板中渲染，修改计算所依赖元数据，而watch在调用时只需修改元数据。

(5)计算属性默认深度依赖，watch默认浅度观测。

(6)计算属性computed需要返回值，watch不需要返回值。

(7)计算属性computed的值不能在data中定义，watch需要在data中定义。

1. 如何利用v-model设计自定义的表单组件

(1)使用自定义组件时，要先注册当前组件，Vue.component('component-name',Component)。同时在组件中定义props接受父组件数据。

(2)在自定义表单组件中加入v-model进行创建双向数据绑定。

2. vue中动态样式绑定（class）的方式都有哪些？

(1)直接在组件上使用class、:class或v-bind:class，如果组件有多个根元素，可以用$attrs指定。

(2)v-bind:class传递一个对象或者多个对象。

(3)v-bind:class传递一个数组，应用一个class列表。

(4)v-bind:class绑定一个返回对象的计算属性。

(5)v-bind:class绑定三元表达式。

组件的data为什么必须是一个函数？

在 Vue 组件中，data 必须是一个函数，因为每个组件实例都应该拥有独立的数据状态。使用函数返回数据对象的方式可以确保每个组件实例都有其自己的数据副本，防止数据共享和相互污染。

写出Vue中组件的6种通信方法。

父传子：通过 props 属性传递数据。

子传父：通过自定义事件和 $emit 方法向父组件发送数据。

非父子组件通信：使用一个空的 Vue 实例作为中央事件总线或 Vuex 状态管理来进行通信。

子组件访问父组件：使用 $parent 访问父组件，但不推荐，应尽量避免。

兄弟组件通信：通过共同的父组件作为中介，将数据传递给兄弟组件。

使用 provide 和 inject：父组件使用 provide 提供数据，子组件使用 inject 注入数据，实现跨层级通信。

怎么理解单向数据流，父子之间传值的方式是什么？

通过 props 将数据传递给子组件，子组件接收并渲染这些数据，但子组件不能直接修改父组件的数据。如果子组件需要修改数据，它必须通过自定义事件（$emit）来通知父组件，然后由父组件来修改数据。这确保了数据流的可维护性和可追踪性，使应用更易于理解和调试。

组合式API的优点有哪些？

（1）更好的逻辑组织：

在选项式API中，组件逻辑是按照data、methods、computed、watch等分块写的，这种分离可能会导致相同功能的代码分散在不同的部分。

组合式API 通过将相关的逻辑组合在一起，使代码更加紧凑和清晰，尤其实在复杂组件中，组织代码的方式更加自然。

（2）更好的逻辑复用：

在选项式API中，如果要复用逻辑，通常使用mixin，但mixin存在作用域不清晰、命名冲突等问题。组合式API提供了composable （可组合函数）的概念，运行将逻辑抽取成独立的函数，这样复用性更强、代码更清晰。

（3）更好的类型推断支持：

组合式API更好地支持TypeScript，尤其是在函数内部可以更明确地推断出数据和函数的类型，而不需要额外的类型定义。

（4）更灵活的响应式系统：

组合式API 提供了更灵活的响应式系统，比如通过ref和reactive可以更直观地控制响应式数据的行为。

组合式API，父子组件传递数据通过什么方式？

（1）父传子：通过 props，父组件通过 props 向子组件传递数据。在子组件中，使用 defineProps 来接收父组件传递的数据。

子传父：通过 emit，子组件通过 $emit 向父组件发送事件，父组件通过监听该事件来接收数据。在子组件中，使用 defineEmits 来定义和触发事件。

（2）用了props与emit。如，在 BookCart.vue 中，父组件通过 props 将书籍数据传递给 BookCartItem.vue 子组件。子组件件通过 emit触发 increment、decrement 或 delete 事件时，父组件会相应地更新数据或删除书籍。这种模式实现了父子组件的双向交互，并保持了组件的解耦。

3. 为什么在抽取的组合式API中，为什么数据会多用ref或reactive？

在 Vue 3 的组合式 API 中，数据通常使用 ref 或 reactive 来定义，是因为这两者能够提供响应式的数据管理。

（1）reactive 适用于对象或数组：它会将整个对象或数组变为响应式。

（2）ref 适用于基本数据类型：如 number、string 等，通过 .value 来访问或修改数据。

（3）ref 和 reactive 确保响应式：它们可以让数据变得响应式，当数据变化时，视图会自动更新。

有写错写漏的可以评论区留言哦待更新中，报告还没写完(っ °Д °;)っ

GDPU Vue前端框架开发期末赛道出勇士篇（更新ing）

选择题

简答题

相关文章：

GDPU Vue前端框架开发期末赛道出勇士篇（更新ing）

老旧小区用电安全保护装置#限流式防火保护器参数介绍#

7.C语言宏（Macro）宏定义，宏函数

4.系统学习-集成学习

Max AI prompt2：

[Unity Shader][图形渲染]【游戏开发】 Shader数学基础8 - 齐次坐标

挑战一个月基本掌握C++（第十二天）了解命名空间，模板，预处理器

python实现根据搜索关键词爬取某宝商品信息

Posison Distribution

2024年最新多目标优化算法：多目标麋鹿群优化算法（MOEHO）求解ZDT1-ZDT4，ZDT6及工程应用---盘式制动器设计，提供完整MATLAB代码

使用Webpack构建微前端应用

Apache RocketMQ 5.1.3安装部署文档

CMS（Concurrent Mark Sweep）垃圾回收器的具体流程

【Linux】Socket编程-UDP构建自己的C++服务器

磁盘结构、访问时间、调度算法

详解归并排序

45.在 Vue 3 中使用 OpenLayers 鼠标点击播放视频

《大话Java+playWright》系列教程初级篇-初识

05.HTTPS的实现原理-HTTPS的握手流程（TLS1.2）

提示词工程

MFC内存泄露

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

微信小程序 - 手机震动

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

【Java_EE】Spring MVC

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

Web中间件--tomcat学习

热门Chrome扩展程序存在明文传输风险，用户隐私安全受威胁

C# winform教程(二)----checkbox

2025年低延迟业务DDoS防护全攻略：高可用架构与实战方案