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

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

news 2025/1/2 19:44:53

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

选择题

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()

填空题

1.Vue.js根实例中el选项主要用于指定挂载元素,data选项主要用来定义数据对象,template选项主要用来定义HTML模板。

2.在使用Vue.js时，建议在GoogleChrome浏览器上安装Vue Devtools拓展程序，它允许在一个更友好的界面中审查和调试Vuejs应用。

3.Vuejs中插值分为文本、HTML代码、属性、JavaScript表达式等多种形式。

4.computed属性默认只有getter但Vue允许设计人员在需要时可以为其提供一个setter。

5.控制台显示信息的命令是console.log(),表格型输出数组和对象的命令是console.table()。

6.定义方法需要在computed选项中进行设置。实时响应data中数据变化而做出一些处理，需要在methods选项中进行设置。

7.为对象添加新属性可以使用Vue.set()方法，才能被实时响应。查看Vue实例中data对象可以使用vm.$data实例属性。

8.Vue中数组变异方法中能够在数据任意位置插入新元素的方法splice(),是能够在数组末尾添加新元素的方法是push()。

9.Vuejs中条件染指令有v-if、v-else、v-else-if和v-show。

10.Vue实例中用于定义挂载元素的选项是el。用于定义模型数据的选项是data。

11.内置指令中能够隐藏未编译的元素的指令是v-model，能够输出HTML标记和内容的指令是v-text。能够实现与表单元素进行绑定的指令是{{}}。输出元素内容的指令是v-html，它等价于使用v-cloak来显示数据属性的值。

12.自定义指令的注册方式有两种，分别是局部注册、全局注册。自定义指令仍然使用v-作为指令的前缀。

13.组件注册分为全局和局部两种方式。全局注册必须使用Vue.component(‘componentname’)指令来实现，局部注册组件必须在Vue实例中的components选项中注册。

14.组件中data选项必须定义为函数形式，格式如data(){return {}}.

15.单组件文件的后缀名是.vue,需要使用vue-loader来解析。

16.插槽通常分为匿名（默认）插槽、具名插槽、作用域插槽等。在父组件可以使用slot属性来将信息插入到指定的具名插槽中，也可以使用v-slot指令来使用指定的插槽。

1.检查nodejs的安装版本信息可以使用的命令是node -v；检查npm安装版本信息可使用的命令是npm -v

2.给项目生成package.json文件的命令是npm init。

4.使用Vue-cli+webpack创建Vue项目时，在完成项目初始化后，通常还需要再执行两条命令，它们分别是cd projectname、npm run dev。

5.在项目中安装Vue的命令是npm install vue;在项目中安装Vuex的命令是

npm install vuex 。

6.在index.js文件中导入Vuex的JS语句是import Vuex from‘vuex’。将定义好的store对象作为默认导出接口的语句是export default store。

7.在Vue组件中通过mapState辅助函数可以获得Vuex的状态。也可以使用计算属性来获取。

8．定义一个store对象可使用的语句是const store=new Vuex.Store({...})。在组件中定义data选项，只能定义为函数方式，格式为data(){return {...}}。

9.state对象中的teacher对象原来有name、sex两个属性，现在需要增加age属性，初始值为45，正确的添加方法有两种，第一种：使用Vue.set（），语句为Vue.set(state.teacher,‘age’,45)。第二种：对象替代法，语句为state.teacher={...state. teacher,age:45}。

10．在使用命名空间的模块Teachers中定义一个名为“addOneTeachers"”这一action，在App.vue组件中methods中使用mapActions辅助函数定义方法addOneTeachers的正确的语句是

(...mapActions(‘Teachers',[‘addOneTeachers'])。

11．Element UI组件Basic、Form、Data、Notice、Navigation、Others等六大类。其中基础组件中的Button按钮使用<el-button>标记，其它组件中的Dialog对话框使用<el-dialog>标记。

13.Mint UI组件分JS组件、CSS组件、Form组件等三类，每类组件内包含若干个子组件。

14.VantUI主要分基础组件、表单组件、反馈组件、展示组件、导航组件、data(){return{...}} 等大类。

15.ElementUl中的面包屑使用 el-breadcrumb标记来实现导航，使用el-breadcrumb-item属性作为分隔符，使用separator标记表示从首页开始的每一级。

17.sessionStorage中保存数据使用sessionStorage.setItem(key,value)方法，删除数据使用sessionStorage.removeltem(key)方法。

18.在Vue 3.0中使用createApp()实例(id为app)，不再需要像Vue2.x中那样使用new Vue({})方式来创建实例。使用mount(‘#app’)法来挂载实例。

19.在Vue3.0中定义响应式对象可以通过函数ref、reactive来定义。但当参数为数组和对象时通常使用reactive来定义。当参数为基本数据类型一般会使用ref来定义。

20.创建Vue3.0项目vue3-pro-1时，可以vue create vue3-pro-1命令。创建完成后需要切换至项目所在文件夹，为项目添加Vue3.0的vue-next插件的命令是vue add vue-next。安装完成后，启动本地开发服务可使用npm run serve命令。

1.setup()可以接收两个参数，第一参数为context，第二个参数为value。Setup(函数内部定义的响应式对象变量，在函数体内使用时，需要添加props，而在模板中使用时则不需要，可以直接展开。

2.mainjs文件主要功能是分别导入相关函数、组件，创建App实例、启动状态管理、启动路由以及挂载#app，在代码中填写相关语句。

代码如下：

1.// main.js

2.import{createApp}from‘vue’//从vue中导入createApp函数

3.import App from */App.vue'

4.import router from/router'

5.import store from'/store

6.createApp(App).use(store).use(router).mount(‘#app’)

//填写语句。

3.setup()函数内部不能使用this，可以使用context来替代this.setup()函数内部定义所有属性和方法都必须使用return返回出来，供组件模板使用。

4.子组件使用父组件传递的数据时，可以在子组件中设置props选项，设置传递参数时需要指定参数的数据类型。

5.使用响应式数据函数可以将reactive()创建出来的对象转换为普通对象，但这个对象上的每一个属性节点都是ref()类型的toRefs()，在组件模板中可以单独使用。在return中使用时需要在其前面加上展开（...）运算符。

6.用watch或watchEffect执行监听时，如果需要停止，可以将watch()或watchEffect()的返回值赋给stop，然后在使用stop()函数显式停止监听行为。

7.给模板中的元素设置ref属性可以实现引用DOM元素，然后在setup()函数内部需要定义ref响应式对象，并在return中将该对象返回出来，才能正确引用。

8.父组件通过provide()函数为子组件或后代组件提供两种类型的共享数据，这两种类型分别为普通数据、响应式数据。子组件或后代组件可以使用inject()函数来使用共享数据。

9.在中to属性的值可以是对象，也可以是一个描述地址的字符串路径。

10.在使用标记定义命名视图时可以使用的属性是name。在嵌套视图的应用中，定义路由时需要将component属性改为components。

11.在VueRouter项目中，可以通过$route.fullPath属性获取路由信息对象的完整路径，可以通过$route.path属性来获取当前路由的路径。

12.定义嵌套路由时，可以在某路由下，使用children属性来下定义子路由。定义子路由时，path属性值可以不加’/’符号，直接写路径名称。

13.路由传参时，可以一条路由记录中使用props属性，并且设置其值为true，然后在路由组件中使用props选项来说明参数。

14.VueRouter默认路由模式为hash，此时URL会包含“#”号。如果将模式设置为history时，URL才像正常的URL。

15.创建一个Vue应用程序需要3个步骤：引入Vue.js库文件、创建Vue实例

、渲染Vue实例。

16.在Vue实例的配置中，el用来选择页面上已存在的DOM元素作为Vue实例的

17.在MVVM架构下，View和Model是通过ViewModel进行交互的。

18.Vuejs中的插值分为文本、HTML代码、属性、JS表达式。

19.完善以下代码：

</div>

//定义Vue实例，绑定数据到DOM节点上

var vm = new Vue({

el:’#div()’//挂载在指定id的元素上

data: {

msg:"欢迎来到Vue.js！‘

}

})

</script>

20.用属性绑定的方法实现给input元素设置名字属性值为ip1，<input :name=’ip1’>

1.完善以下代码，实现点击按钮出现helloworld字样

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

</div>

var vm = new Vue({

el:"#app',

data: {

msg:’’

methods: {

//定义事件处理方法showlnfo

showMsg() {

this.msg = ‘helloworld’

}

})

</script>

</body>

</html>

2.完善以下代码，实现changeName数据监听

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

</div>

var vm = new Vue({

el:’#app',

data: {

changeName: 'AAA'

watch: {

changeName(newName, oldName){

console.log(newName, oldName)

}

})

</script>

</body>

</html>

3.控制台中console.dir()命令用来显示一个对象所有的属性和方法。

4.方法console.time()和console.timeEnd0用来显示代码的运行时间。

5.控制台可以查看Vue实例属性data的语句是：console.dir(vm.$data)，其中vm为Vue实例对象。

6.局部过滤器可以定义在Vue实例内部，用filters:{}属性定义一个或多个局部过滤器。

7.v-show和v-if的不同之处有：（1）实现方式不同。(2)编译过程不同。(3)编译条件不同。(4)性能消耗不同。

8.Vue.js中条件渲染指令有v-if、v-else、v-else-if、v-show。

9.v-on:click用语法糖可以简写成@click。

10.在动态地、响应式更新元素的样式时，v-bind可以绑定class，也可以绑定style。

11.事件修饰符中，.self只会触发自己范围内的事件，不包含子元素。

12.自定义指令的注册方式有两种，分别是局部注册、全局注册。

13.表单中文本输入框可以用v-model指令将数据绑定到value属性。

14.指令与元素第一次绑定时调用的钩子函数是bind。

15.字面量分为字符串字面量(string literal)、数组字面量(array literal)和对象字面量(object literal)，另外还有函数字面量(function literal)、模板字面量(多行文本字符串)。

16.能够实现与元素的属性绑定的指令是v-bind。

17.Vue实例对象中，通过components选项来局部注册组件。

18.组件注册分为全局注册和局部注册两种方式。

19.props的值的类型有两种：一种是字符串数组，一种是对象。

20.父组件也可以通过children访问它所有的子组件中的数据。

1.父组件可以使用this.refs（子组件索引）来获取或修改组件数据。

2.slot元素可以用一个特殊的属性name来配置如何分发内容

3.在向具名插槽提供内容的时候，也可以在一个template元素上使用v-slot指令。

4.v-slot:slot1可以用语法糖写成#slot1(类似于v-on:click,语法糖@click)。

5.动态插槽名需要使用v-slot:”[]”来包裹。

11．代码补全。

使得按钮可以根据key属性的值显示“保存”或者“切换”。

<button v-bind:key=”isEditing”

</button>

</transition>

14.完善代码，使得初始状态下按钮显示‘On'

<button :key="isOff" @click="isOff=!isOff">{{isOff?'Off’:'On'}}</button>

</transition>

</div>

var vm = new Vue({ el: "#app', data:{ isOff:false }}

</script>

15.完善代码，使得transition组件在example1和example2之间切换。

<body>

<span>我是登录组件</span>

</template>

<span>我是注册组件</span>

</template>

</transition>

</div>

Vue.component(‘example1',{template:’#example1'})

Vue.component(‘example2’, {template:"#example2'})

var vm = new Vue({

el:'"#app',

data:{compontentName:’’}

})

</script>

</body>

16.Nodejs是一个基于ChromeV8引擎的JavaScript运行环境，采用了单线程、非阻塞IO事件驱动式的程序设计模式。

17.Node.js非常适合于cpu密集型应用，如多人在线聊天、多人在线小游戏、实时新闻、博客、微博等。不适用于io密集型应用，如高性能计

18.Nodejs安装是否正常，可以使用node-v命令来检查，如果出现版本号说明安装正确，否则未完成安装。

19.Node.js中根据模块来源的不同，将模块分为了3大类，分别是原生模块、

自定义模块、第三方模块。

4.全局安装vue-cli(或@vue/cli)是npm install vue-cli (或@vue/cli)-g。

5.利用脚手架创建项目vueinit<template-name><project-name>中template-name指的是模板名称。

6．使用vue ui命令可以可视化地创建vue项目。

7.使用vue-cli@2.x命令行工具创建Vue项目myproject命令是vue init webapck myproject。

8.使用@vue/cli@3.x版本创建Vue项目myproject的命令是vue create myproject。

9．使用import Router from ‘vue-router'，则使用VueRouter的正确语句是Vue.use(Router)

10.设置路由导航时，使用to属性来传入路由（导航路径）。

11.设置动态路由匹配时，需要在路由中path属性上使用“：”来连接动态路径参数。

12.当匹配到动态路由时，动态路径参数被保存在this.$route对象的params中。

13.每条路由route通常包含2个基本属性，分别是path、component属性，当然也可以设置name、children等。

14.完善以下代码，在根实例中注册路由。

import router from ’/router’//导入路由组件

new Vue({

el:’#app',router

components:{App},

template:'<App/>'

})

15.在命名路由中，如果router-view没有设置名字，那么默认为default。

16.重定向也是通过routes配置redirect属性来完成。

17.完善下列代码，设置路由为历史模式

const router = new VueRouter({

mode:’history’，

routes: [...]

})

18.script标记中配置路由包含定义/导入路由组件、定义路由、创建路由实例和传入路由表参数等几个部分。

19.定义一个Store的实例对象可使用的语句是const store=new Vuex.Store({...})。

20.使用vue init webpack vuex-1方法创建项目后，必须在当前目录下安装vuex，并且将安装信息写入到开发依赖中的命令是npm install vuex -D 。

1.完善代码，在项目文件中导入并显式地使用Vuex。

// index.js

import Vue from'vue'

import Vuex from'vuex’

Vue.use(Vuex)//显式地使用Vuex

2.Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型和一个回调函数(handller)。

3.在Vuex配置选项中，其中actions是异步执行的。

4.在Vuex配置选项中，其中modules选项用来在store实例中定义模块对象。

5.存储在Vuex的状态中数据一旦发生变化，所有的组件或实例中的数据都会同步更新，所以说Vuex的状态存储是响应式的。

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

7.Vuex为批量获取getters提供的辅助函数是mapGetters()。

8.Vuex应用的核心就是store（仓库）。store就是一个容器，它包含着用户应用中大部分的状态。

9.在Vue2.x中使用newVue(0)方式来创建实例，而在Vue3.x中则使用createApp()创建组件实例(id为app)

10.ref()函数接收一个参数值，返回一个响应式数据对象，该对象只包含一个指向内部的value属性。

11.完善代码，创建Vue实例并挂载到app上：

import {createApp} from ‘vue’

import App from ‘./App.vue’

createApp(App).mount(#app)

12.完善代码，完成注释部分功能：

Setup() {

const objNumber = reactive({

int1: 1,

int2:computed(() => objNumber.int1 + 5)//定义一个计算属性，将int1的值+5后赋值给int2

});

}

13.在Vue3.0中可以使用ref引用DOM元素和组件实例。

14.需要将数据从父组件传递到子组件时，使用可以props。

15.Vue3中的watch函数可以用来懒情地执行监听数据源，并且可以监视状态的先前值和当前值。

16.完善代码，切换路由模式为hash模式。

const router = createRouter({

history.createWebHistory(process.env.BASE_URL),

Routes

})

17.钩子函数onBeforeMount作用于组件挂载前。

简答题

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 确保响应式：它们可以让数据变得响应式，当数据变化时，视图会自动更新。

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

查看全文

http://www.mrgr.cn/news/81968.html