GDPU Vue前端框架開發期末賽道出勇士篇（更新ing）

記住，年底陪你跨年的不會僅是方便面跟你的閨蜜，還有孑的筆記。

選擇題

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 確保響應式：它們可以讓數據變得響應式，當數據變化時，視圖會自動更新。

?有寫錯寫漏的可以評論區留言哦待更新中，報告還沒寫完(っ °Д °;)っ