第11章 Vue前端框架

第11章Vue前端框架第11章Vue前端框架11.1

Vue簡(jiǎn)介11.2

Vue腳手架11.3

目錄結(jié)構(gòu)11.4

初識(shí)setup和ref11.5

模板語法11.6

生命周期鉤子11.7

reactive函數(shù)11.8

初識(shí)Vue組件211.9深入setup11.10

計(jì)算屬性11.11

條件渲染11.12

列表渲染11.13watch監(jiān)視11.14

provide與inject11.15

Vue路由11.16

axios發(fā)送請(qǐng)求11.1Vue簡(jiǎn)介

與知名前端框架Angular一樣，Vue.js在設(shè)計(jì)上也使用了MVVM(Model-View-ViewModel)模式。MVVM模式本質(zhì)上就是MVC的改進(jìn)版，View綁定到ViewModel，然后執(zhí)行一些命令，再向它請(qǐng)求一個(gè)動(dòng)作，View和ViewModel之間通過雙向綁定建立聯(lián)系。ViewModel跟Model通訊，告訴它更新來響應(yīng)UI，這樣便使得為應(yīng)用構(gòu)建UI非常容易。311.2Vue腳手架vue-cli是Vue的腳手架工具，它大大降低了webpack的使用難度，支持熱更新，有webpack-dev-server的支持，相當(dāng)于啟動(dòng)了一個(gè)請(qǐng)求服務(wù)器，搭建了一個(gè)測(cè)試環(huán)境。使用vue-cli前，要確保已經(jīng)安裝了最新版的Node.js和NPM。411.2Vue腳手架使用vue-cli構(gòu)建一個(gè)項(xiàng)目的步驟。（1）創(chuàng)建自己的工作空間，這里以D盤根目錄為工作空間。（2）安裝vue-cli，直接在cmd命令端口中輸入如下命令：D:\>npminstall-g@vue/cli

在cmd命令端口中輸入如下命令查看版本：D:\>vue–V（3）在命令端口中輸入命令，創(chuàng)建一個(gè)基于webpack模板的新項(xiàng)目D:\>vuecreatevue3-demo（4）在命令端口中，切換到項(xiàng)目路徑D:\>cdvue3-demo511.2Vue腳手架使用vue-cli構(gòu)建一個(gè)項(xiàng)目的步驟。（5）輸入命令，就可以啟動(dòng)這個(gè)項(xiàng)目D:\vue3-demo>npmrunserve

項(xiàng)目啟動(dòng)成功后,控制臺(tái)顯示如右圖所示。（6）打開瀏覽器，輸入地址http://localhost:8080，頁面輸出如下圖所示。611.3目錄結(jié)構(gòu)

使用VisualStudioCode打開項(xiàng)目vue3-demo，可以查看項(xiàng)目的目錄結(jié)構(gòu)。7node_modules目錄用于存放項(xiàng)目的依賴項(xiàng)。public目錄用于存放公共靜態(tài)資源，該目錄下的index.html是項(xiàng)目的主頁，即入口html頁面。src是項(xiàng)目的核心目錄，assets子目錄用于存放靜態(tài)資源文件，如字體、圖標(biāo)、圖片等，components子目錄用于存放公共組件，使用vue-cli構(gòu)建項(xiàng)目時(shí)，默認(rèn)會(huì)在該目錄下創(chuàng)建組件HelloWorld.vue。App.vue是根組件，main.js是項(xiàng)目執(zhí)行的入口js。.gitignore用來指定git提交時(shí)需要忽略的文件格式，.babel.config.js是babel配置文件，package.json用來保存項(xiàng)目依賴項(xiàng)的版本信息，package-lock.json用來保存node_modules目錄下所有依賴項(xiàng)的具體來源、版本號(hào)和其他信息，README.md是項(xiàng)目的說明文檔。11.3目錄結(jié)構(gòu)main.js是項(xiàng)目執(zhí)行的入口js文件，初始時(shí)該文件里只有三行代碼：import{createApp}from'vue’importAppfrom'./App.vue’createApp(App).mount('#app’)在main.js文件中，通過“import...from...”這個(gè)ES6語法中的新特性，先引入一個(gè)名為“createApp”的工廠函數(shù)，再引入App.vue這個(gè)根組件。接下來通過createApp(App)創(chuàng)建一個(gè)應(yīng)用實(shí)例對(duì)象，createApp方法的參數(shù)是根組件對(duì)象App，即創(chuàng)建了一個(gè)根實(shí)例對(duì)象，并調(diào)用mount方法將這個(gè)實(shí)例對(duì)象掛載到某個(gè)html的DOM節(jié)點(diǎn)上。一般通過id選擇器的形式，指定掛載的DOM元素，這里的“#app”表示掛載到public目錄下index.html這個(gè)文件中id為“app”的div節(jié)點(diǎn)上。811.3目錄結(jié)構(gòu)打開index.html文件中，能看到這個(gè)id為“app”的div節(jié)點(diǎn)。啟動(dòng)項(xiàng)目并通過瀏覽器訪問，首先訪問的就是這個(gè)index.html文件，因?yàn)橛幸粋€(gè)id為app的掛載點(diǎn)，接著根實(shí)例對(duì)象就會(huì)掛載到這個(gè)掛載點(diǎn)上。

911.3目錄結(jié)構(gòu)初始時(shí)，根組件App.vue內(nèi)容如右圖所示。一個(gè)Vue組件主要包括模板、行為和樣式三個(gè)部分。以根組件App.vue為例，模板是組件中template中的內(nèi)容（將替代原來掛載點(diǎn)的內(nèi)容），行為是script中的內(nèi)容，樣式是style中的內(nèi)容。在script中，使用exportdefault將根組件App.vue導(dǎo)出為一個(gè)對(duì)象，并通過name屬性將導(dǎo)出名稱指定為“App”。在其它組件中，就可以使用import引入這個(gè)導(dǎo)出的對(duì)象了。此外，通過components屬性局部注冊(cè)組件HelloWorld。當(dāng)然，這個(gè)HelloWorld組件需要事先通過import進(jìn)行引入。

10同時(shí)，在根組件App.vue的template中，還需要使用這個(gè)組件。11.4初識(shí)setup和ref

setup是Vue3組合式API中的一個(gè)函數(shù)，在setup函數(shù)中，可以定義變量和方法等。但是，需要將這些變量和方法return出去，否則無法在模板中使用。在組件HelloWorld.vue中，添加setup函數(shù)。1111.4初識(shí)setup和ref

ref

也是Vue3組合式API中的一個(gè)函數(shù)，用來定義響應(yīng)式變量。在使用ref函數(shù)時(shí)，需要在組件的script中引入。

import{ref}from"vue";ref函數(shù)接受參數(shù)并返回一個(gè)對(duì)象，并將這個(gè)參數(shù)包裝在返回對(duì)象的value屬性中。在組件HelloWorld.vue的setup函數(shù)中，定義一個(gè)響應(yīng)式變量counter。varcounter=ref(0);響應(yīng)式變量counter的value屬性值為0，可以使用counter.value訪問或修改響應(yīng)式變量的值。1211.4初識(shí)setup和ref在setup函數(shù)中，還可以自定義函數(shù)。constadd=()=>{counter.value++;};這里，使用ES6箭頭函數(shù)語法，定義了函數(shù)add，對(duì)響應(yīng)式變量counter進(jìn)行++操作。箭頭函數(shù)省略了function關(guān)鍵字，采用箭頭“=>”來定義函數(shù)。函數(shù)的參數(shù)放在箭頭前面的括號(hào)中，函數(shù)體跟在箭頭后面的花括號(hào)中。在setup函數(shù)中，將響應(yīng)式變量counter和自定義函數(shù)add通過return返回出去，這樣才能在template模板中使用。return{counter,add}1311.4初識(shí)setup和ref在組件HelloWorld.vue的template模板中，使用響應(yīng)式變量counter和自定義函數(shù)add。在template模板中，使用了“Mustache”語法（雙大括號(hào)）的文本插值，{{counter}}將會(huì)被替代為組件實(shí)例中響應(yīng)式變量counter的值。無論何時(shí)，綁定的組件實(shí)例上響應(yīng)式變量counter的值發(fā)生了改變，插值處的內(nèi)容都會(huì)更新。還添加了<button>標(biāo)簽，并通過@click給<button>標(biāo)簽綁定點(diǎn)擊事件。單擊這個(gè)按鈕時(shí)，會(huì)調(diào)用自定義函數(shù)add，將響應(yīng)式變量counter的value值加1。1411.4初識(shí)setup和ref啟動(dòng)項(xiàng)目并通過瀏覽器訪問，多次單擊“+1”按鈕，計(jì)數(shù)不斷變化。1511.5模板語法Vue.js使用了基于HTML的模版語法，可以采用簡(jiǎn)潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn)DOM。通過結(jié)合響應(yīng)系統(tǒng)，在應(yīng)用狀態(tài)改變時(shí)，能智能地計(jì)算重新渲染組件的最小代價(jià)并應(yīng)用到DOM操作上。1611.5.1插值(1)文本插值數(shù)據(jù)綁定最常見的形式就是使用{{...}}（雙大括號(hào)）的文本插值，在組件HelloWorld.vue的template中，文本插值代碼如下：<h1>{{counter}}</h1>1711.5.1插值(2)原始HTML雙大括號(hào)會(huì)將數(shù)據(jù)解釋為普通文本，而非HTML代碼。為了輸出真正的HTML，需要使用v-html指令。示例：1)

在組件HelloWorld.vue的setup函數(shù)中，先定義一個(gè)響應(yīng)式變量msg1varmsg1=ref("<fontcolor='red'size='14'>HelloVue!</font>");2)將變量msg1通過return返回出去return{…,msg1

}3)在template模板中使用v-html指令，如右圖所示。啟動(dòng)項(xiàng)目并通過瀏覽器訪問，頁面輸出如圖。1811.5.1插值(3)屬性如果要?jiǎng)討B(tài)更新HTML元素上的屬性，比如id、class和style等，可以使用v-bind指令。示例：191)在組件HelloWorld.vue的setup函數(shù)中，先定義一個(gè)響應(yīng)式變量styleObject。2)將變量styleObject通過return返回出去。

return{…,styleObject};3)在template模板中使用v-bind:style，給<div>標(biāo)簽動(dòng)態(tài)綁定樣式，將其直接綁定到樣式對(duì)象styleObject。啟動(dòng)項(xiàng)目并通過瀏覽器訪問，頁面輸出如右圖。11.5.1插值

表達(dá)式Vue.js提供了完全的JavaScript表達(dá)式支持

示例：（1）在組件HelloWorld.vue的setup函數(shù)中，先定義三個(gè)響應(yīng)式變量varflag=ref(true);varmessage=ref("HelloVue!");varid=ref(10);（2）將變量這三個(gè)變量通過return返回出去（3）在template模板中，使用表達(dá)式2011.5.2指令指令(Directives)是帶有“

v-

”前綴的特殊特性，用于在表達(dá)式的值改變時(shí)，將某些行為應(yīng)用到DOM上。示例（1）在組件HelloWorld.vue的setup函數(shù)中，先定義一個(gè)響應(yīng)式變量showvarshow=ref(true);（2）將變量show通過return返回出去return{…,show

};（3）在template模板中，使用v-if指令2111.5.2指令一些指令還可以接收一個(gè)參數(shù)，在指令名稱之后以冒號(hào)表示。例如v-bind:href，這里href是參數(shù)，告知v-bind指令將該元素的href特性與表達(dá)式url的值綁定。示例（1）在組件HelloWorld.vue的setup函數(shù)中，先定義一個(gè)響應(yīng)式變量urlvarurl=ref("");（2）將變量url通過return返回出去return{...url

};（3）在template模板中，使用v-bind:href<hr><pre><av-bind:href="url">百度一下</a></pre>2211.5.3用戶輸入在input輸入框中，可以使用v-model指令來實(shí)現(xiàn)雙向數(shù)據(jù)綁定。示例（1）在組件HelloWorld.vue的template模板中，使用v-model<hr><p>{{message}}</p><inputv-model="message">（2）在輸入框中修改內(nèi)容，和它綁定的值也會(huì)發(fā)生變化2311.5.4縮寫Vue.js為v-bind和v-on這兩個(gè)最常用的指令提供了特定簡(jiǎn)寫。24v-on指令縮寫前后的對(duì)比<!--完整語法--><av-on:click="doSomething"></a><!--縮寫--><a@click="doSomething"></a>v-bind指令縮寫前后的對(duì)比<!--完整語法--><av-bind:href="url"></a><!--縮寫--><a:href="url"></a>11.6生命周期鉤子每個(gè)Vue實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過一系列的初始化過程，例如，需要設(shè)置數(shù)據(jù)監(jiān)視、編譯模板、將實(shí)例掛載到DOM并在數(shù)據(jù)變化時(shí)更新DOM等。同時(shí)在這個(gè)過程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù)，用戶可以在不同階段添加自己的處理業(yè)務(wù)邏輯的代碼。在組件的setup函數(shù)內(nèi)，可以調(diào)用的生命周期鉤子包括onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount和onUnmounted等。onBeforeMount在實(shí)例掛載開始之前被調(diào)用，onMounted在實(shí)例被掛載后調(diào)用，onBeforeUpdate在DOM更新前調(diào)用，onUpdated在DOM更新后調(diào)用，onBeforeUnmount在卸載組件實(shí)例之前調(diào)用，onUnmounted在卸載組件實(shí)例后調(diào)用。2511.6生命周期鉤子示例（1）要使用生命周期鉤子，需要先引入。在組件HelloWorld.vue的script中，使用import引入6個(gè)生命周期鉤子。

26（2）在組件HelloWorld.vue的setup函數(shù)中，添加這些生命周期鉤子，并輸入提示信息。（3）啟動(dòng)項(xiàng)目并通過瀏覽器訪問，再按下F12鍵，打開開發(fā)者工具，在Console中可以看到setup、onBeforeMount和onMounted這三個(gè)函數(shù)被依次調(diào)用。import{onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,}from"vue";（4）單擊頁面中的“+1”按鈕，可以看到onBeforeUpdate和onUpdated這兩個(gè)函數(shù)會(huì)被調(diào)用11.6生命周期鉤子onBeforeUnmount和onUnmounted示例（1）在根組件App.vue的script中引入ref函數(shù)。import{ref}from"vue";

27（2）再添加setup函數(shù)，并定義一個(gè)響應(yīng)式變量isShow，并通過return返回出去。（3）在根組件App.vue的template中，給HelloWorld元素添加一個(gè)條件渲染指令v-if，當(dāng)變量isShow的值為true時(shí)，渲染HelloWorld元素，否則不渲染。（4）最后添加一個(gè)用于隱藏和顯示HelloWorld元素的button元素，并通過@click給

button元素綁定點(diǎn)擊事件，將變量isShow值取反。啟動(dòng)項(xiàng)目并通過瀏覽器訪問，再按下F12鍵，打開開發(fā)者工具，在Console中可以看到setup、onBeforeMount和onMounted這三個(gè)函數(shù)被依次調(diào)用；此時(shí)，單擊“隱藏/顯示HelloWorld組件”按鈕，在Console中可以看到onBeforeUnmount和onUnmounted這兩個(gè)生命周期鉤子被調(diào)用。11.7reactive函數(shù)

reactive用來定義一個(gè)對(duì)象類型的響應(yīng)式變量，不能用來定義基本類型的響應(yīng)式變量。使用reactive函數(shù)前，需要先引入。示例（1）在組件HelloWorld.vue的script中，引入reactive函數(shù)import{ref,reactive}from"vue";（2）在組件HelloWorld.vue的setup函數(shù)中，定義一個(gè)對(duì)象類型的響應(yīng)式變量student。（3）在setup函數(shù)中，將響應(yīng)式變量student通過return返回出去。2811.7reactive函數(shù)（4）在組件HelloWorld.vue的template模板中，使用響應(yīng)式變量student。（5）在template模板中，通過{{}}和{{student.age}}輸出student對(duì)象的name和age屬性值。2911.8初識(shí)Vue組件組件(Component)是Vue.js最強(qiáng)大的功能之一，組件可以擴(kuò)展HTML元素，封裝可重用的代碼，通過可復(fù)用的小組件可以構(gòu)建大型應(yīng)用。組件需要注冊(cè)后才能使用，注冊(cè)有全局注冊(cè)和局部注冊(cè)兩種方式。組件的創(chuàng)建和使用示例（1）在項(xiàng)目vue3-demo的components目錄下，新建一個(gè)組件Child.vue。（2）在根組件App.vue的script中，先通過import引入組件Child.vue。importChildfrom"./components/Child.vue";3011.8初識(shí)Vue組件（3）通過exportdefault中的components屬性，采用局部注冊(cè)的方式，注冊(cè)組件Child.vue。（4）在根組件App.vue的template模板中，添加<Child/>標(biāo)簽，就可以使用組件Child.vue了。3111.9深入setupsetup函數(shù)還可以接收props和context這兩個(gè)參數(shù)。（1）props參數(shù)props參數(shù)包含父組件傳遞給子組件的數(shù)據(jù)，在子組件中，則需要通過props屬性指定要接收的數(shù)據(jù)。示例：根組件App.vue傳遞數(shù)據(jù)給子組件Child.vue（1）在根組件App.vue的template中，修改<Child>標(biāo)簽。（2）在子組件Child.vue的exportdefault中，先添加props屬性，指定要從父組件接收的屬性名為title和content。3211.9深入setup（3）修改子組件Child.vue的setup函數(shù)，給它添加一個(gè)props參數(shù)，該參數(shù)包含了從父組件傳遞來的title和content屬性值，經(jīng)過toRefs函數(shù)處理后return出去。（4）使用toRefs函數(shù)前，需要引入。在子組件Child.vue的script中，引入toRefs函數(shù)。import{toRefs}from'vue’（5）在子組件Child.vue的template模板中，通過文本插值，將從父組件App.vue接收到的title和content屬性值顯示出來。3311.9深入setup（2）context參數(shù)setup函數(shù)的第二個(gè)參數(shù)是context，表示上下文。context是一個(gè)普通的JavaScript對(duì)象，它包含attrs、slots和emit這三個(gè)屬性。

1）attrs屬性在父組件向子組件傳遞數(shù)據(jù)時(shí)，子組件需要通過props屬性來聲明父組件傳遞的屬性名，這樣才能從props獲取相應(yīng)的屬性值。如果props屬性中沒有聲明，則屬性值會(huì)出現(xiàn)在context對(duì)象的attrs里。props屬性中聲明的屬性名，attrs里就不會(huì)出現(xiàn)相應(yīng)的屬性值。props支持支持string以外的類型，而attrs只有string類型。示例：（1）在子組件Child.vue的exportdefault中，修改props屬性，將其數(shù)組中聲明的屬性名稱content移除，只保留title。3411.9深入setup由于props屬性中沒有指定content屬性名，因此子組件Child.vue無法從props中獲取屬性content的值。（2）可以從context對(duì)象的attrs里可以獲得屬性content的值。修改setup函數(shù)，給setup函數(shù)添加第二個(gè)參數(shù)context，使用toRefs函數(shù)對(duì)context對(duì)象的attrs進(jìn)行處理。3511.9深入setup

2）slots屬性context對(duì)象的slots屬性用于接收父組件中定義的插槽內(nèi)容。示例：slots的作用（1）在根組件App.vue的template模板中，先將自結(jié)束標(biāo)簽<Child/>修改為包含開始和結(jié)束的Child標(biāo)簽，并在Child標(biāo)簽體部添加一個(gè)span元素。直接在父組件App.vue的<Child>標(biāo)簽體部定義的內(nèi)容，在子組件Child.vue中不會(huì)被渲染，使用插槽就能解決這個(gè)問題。3611.9深入setup（2）在子組件Child.vue的template模板中，添加一個(gè)<slot>元素占位（默認(rèn)插槽），就可以用來顯示父組件<Child>標(biāo)簽下的內(nèi)容了。在子組件Child.vue中的默認(rèn)插槽<slot></slot>中，還可以提供一個(gè)默認(rèn)內(nèi)容，如果父組件的<Child>標(biāo)簽中沒有為這個(gè)插槽提供了內(nèi)容，就會(huì)顯示默認(rèn)的內(nèi)容，否則默認(rèn)的內(nèi)容會(huì)被替換掉。3711.9深入setup示例：具名插槽在子組件的<slot>標(biāo)簽上綁定屬性值，通過作用域插槽，在父組件的插槽模板中可以拿到子組件綁定的這些屬性值，從而實(shí)現(xiàn)子組件向父組件的數(shù)據(jù)傳遞。（1）修改子組件Child.vue的template模板中名稱為“header”的具名插槽，添加一個(gè)userName屬性，將其值指定為“張三”。<slotname="header"userName="張三"></slot>（2）在根組件App.vue的template中，修改<Child>標(biāo)簽體部相應(yīng)的template節(jié)點(diǎn)。3811.9深入setup

3）emit屬性

在子組件中，可以使用context.emit向父組件發(fā)送事件。示例：（1）在子組件Child.vue的template模板中，添加一個(gè)<button>標(biāo)簽，并給其綁定click事件，單擊這個(gè)按鈕時(shí)，會(huì)觸發(fā)postMsg函數(shù)。（2）在子組件Child.vue的setup函數(shù)中，添加一個(gè)postMsg函數(shù)。在postMsg函數(shù)中，通過context.emit向父組件App.vue發(fā)送自定義事件。3911.9深入setup（3）在子組件Child.vue的setup函數(shù)的return中，將函數(shù)postMsgClick返回出去。return{...,postMsg

};（4）在父組件App.vue的template模板中，修改<Child>標(biāo)簽，給其綁定自定義事件postMsgClick，該事件就是子組件發(fā)送來的。當(dāng)postMsgClick事件觸發(fā)時(shí)，會(huì)執(zhí)行showMsg函數(shù)。

<Child@postMsgClick="showMsg"title="hellochild"content="這是父組件App.vue傳遞的數(shù)據(jù)">（5）在父組件App.vue的setup函數(shù)中，添加一個(gè)showMsg函數(shù)。在showMsg函數(shù)中，通過js的alert函數(shù)，彈出一個(gè)警告框，顯示一段提醒信息和從子組件傳遞來的參數(shù)userName的值。4011.9深入setup（6）在父組件App.vue的setup函數(shù)的return中，將函數(shù)showMsg返回出去。return{isShow,showMsg

};

4111.10計(jì)算屬性模板內(nèi)的表達(dá)式非常便利，常用于簡(jiǎn)單運(yùn)算。但在模板中放入大量的邏輯會(huì)讓模板難以維護(hù)。為了解決這個(gè)問題，可以使用計(jì)算屬性。使用計(jì)算屬性，需要先引入。示例（1）在子組件Child.vue的script中，修改import，先引入computed函數(shù)，再引入ref函數(shù)，用于聲明響應(yīng)式變量。import{toRefs,ref,computed}from"vue";（2）在子組件Child.vue的template中，添加三個(gè)<input>標(biāo)簽，用于輸入性、名和全名。在input輸入框中，使用v-model指令來實(shí)現(xiàn)雙向數(shù)據(jù)綁定。4211.10計(jì)算屬性（3）在子組件Child.vue的setup函數(shù)中，使用ref聲明響應(yīng)式變量firstName和lastName，并給它們指定初始值。letfirstName=ref("李");letlastName=ref("四");（4）定義一個(gè)計(jì)算屬性fullName，在computed函數(shù)中，提供了get和set方法。（5）再將firstName、lastName和fullName這三個(gè)變量return出去。4311.10計(jì)算屬性將“姓”輸入框內(nèi)容修改為張，此時(shí)全名會(huì)發(fā)生變化。將“全名”輸入框內(nèi)容修改為“諸葛

四”，則“姓”輸入框內(nèi)容也會(huì)隨之發(fā)生變化。4411.11條件渲染與JavaScript的條件語句if、else、elseif類似，Vue.js提供的條件渲染指令v-if、v-else、v-else-if可以根據(jù)表達(dá)式的值將DOM中元素或組件渲染或銷毀。示例（1）在子組件Child.vue的template模板中，添加若干<p>標(biāo)簽，分別使用v-if、v-else-if和v-else添加渲染指令。（2）在子組件Child.vue的setup函數(shù)中，聲明一個(gè)響應(yīng)式變量score，并指定初始值為85。letscore=ref(85);（3）將score變量return出去。return{...,score};4511.12列表渲染如果想要循環(huán)顯示一個(gè)數(shù)組或一個(gè)對(duì)象屬性時(shí)，可以使用

v-for

指令。示例1（1）在子組件Child.vue的setup函數(shù)中，使用reactive函數(shù)聲明一個(gè)響應(yīng)式變量students，并指定初始值。（2）為了使用reactive函數(shù)，需要在子組件Child.vue的script中通過import引入。import{toRefs,ref,computed,reactive}from"vue";（3）將students變量return出去。

return{...,students};4611.12列表渲染（4）在子組件Child.vue的template模板中，添加一個(gè)<ul>標(biāo)簽，在<ul>標(biāo)簽體部再添加一個(gè)<li>標(biāo)簽，在<li>標(biāo)簽上添加v-for

指令。4711.12列表渲染除了數(shù)組外，對(duì)象的屬性也可以使用v-for指令進(jìn)行渲染。示例2（1）在子組件Child.vue的setup函數(shù)中，使用reactive函數(shù)聲明一個(gè)響應(yīng)式變量stu，并指定初始值。（2）在子組件Child.vue的template模板中，添加一個(gè)<ul>標(biāo)簽，在<ul>標(biāo)簽體部再添加一個(gè)<li>標(biāo)簽，在<li>標(biāo)簽上添加v-for

指令。4811.13watch監(jiān)視

watch函數(shù)可以用來監(jiān)視響應(yīng)式數(shù)據(jù)的變化，并且可以得到newValue（新值）和oldValue（舊值）。使用watch函數(shù)，需要先導(dǎo)入。示例1：監(jiān)視r(shí)ef定義的數(shù)據(jù)（1）在子組件Child.vue的script中通過import引入watch函數(shù)。import{toRefs,ref,computed,reactive,watch}from"vue";（2）在子組件Child.vue的setup中，使用ref函數(shù)聲明一個(gè)響應(yīng)式變量counter，并指定初始值。

letcounter=ref(0);（3）將counter變量return出去。

return{...,counter};4911.13watch監(jiān)視（4）在子組件Child.vue的setup函數(shù)中，定義一個(gè)函數(shù)changeCounter，用于更新counter變量的值。（5）將changeCounter函數(shù)return出去。return{...,counter,changeCounter};（6）在子組件Child.vue的setup函數(shù)中，定義一個(gè)watch函數(shù)，用來監(jiān)視counter值的變化。（7）在子組件Child.vue的template模板中，添加一個(gè)<button>標(biāo)簽，給其綁定click事件。單擊這個(gè)“改變counter”按鈕時(shí)，會(huì)調(diào)用自定義函數(shù)changeCounter。<hr/><button@click="changeCounter">改變counter</button>5011.13watch監(jiān)視啟動(dòng)項(xiàng)目并通過瀏覽器訪問按下F12鍵，打開開發(fā)者工具，再多次單擊“改變counter”按鈕。此時(shí)，在Console中可以看到輸出信息。每次單擊“改變counter”按鈕后，都會(huì)調(diào)用自定義函數(shù)changeCounter修改counter變量的值，watch函數(shù)監(jiān)視到counter變量值發(fā)生了改變，就會(huì)在開發(fā)者工具的控制臺(tái)中輸出新值和舊值等信息。5111.13watch監(jiān)視示例2：監(jiān)視r(shí)eactive定義的數(shù)據(jù)（1）在子組件Child.vue的setup函數(shù)中，聲明變量goods，并指定初始值。letgoods=reactive({name:"冰箱",price:3999,});（2）將goods變量return出去。return{...,goods};（3）在子組件Child.vue的setup函數(shù)中，定義函數(shù)changeGoodsName，用于更新goods對(duì)象中的name屬性值。（4）將changeCounter函數(shù)return出去。（5）在子組件Child.vue的setup函數(shù)中，定義watch函數(shù)，用來監(jiān)視goods對(duì)象中屬性值的變化。5211.13watch監(jiān)視（6）在子組件Child.vue的template模板中，添加一個(gè)<button>標(biāo)簽，給其綁定click事件。單擊這個(gè)“改變goods對(duì)象name屬性值”按鈕時(shí)，會(huì)調(diào)用自定義函數(shù)changeGoodsName。<hr/><button@click="changeGoodsName">改變goods對(duì)象name屬性值</button>啟動(dòng)項(xiàng)目并通過瀏覽器訪問按下F12鍵，打開開發(fā)者工具，再單擊“改變goods對(duì)象name屬性值”按鈕。此時(shí)，在Console中可以看到輸出信息。單擊“改變goods對(duì)象name屬性值”按鈕，調(diào)用函數(shù)changeGoodsName修改goods對(duì)象的name屬性值，watch函數(shù)監(jiān)視到name屬性值發(fā)生了改變，就會(huì)在開發(fā)者工具的控制臺(tái)中輸出信息，但是輸出的newVal和oldVal值都是修改后的新值。5311.14provide與inject將數(shù)據(jù)從父組件傳遞到子組件時(shí)，可以使用props。但是，對(duì)于層次比較深的組件，將數(shù)據(jù)從祖組件傳遞到孫組件時(shí)，使用props可能會(huì)比較麻煩。這時(shí)，可以使用provide和inject。祖組件（父組件）通過provide屬性來提供數(shù)據(jù)，孫組件（子組件）則通過inject屬性來使用這個(gè)數(shù)據(jù)。示例（1）在項(xiàng)目vue3-demo的components目錄下，新建一個(gè)組件Grandson.vue。初始時(shí)，Grandson.vue組件內(nèi)容。5411.14provide與inject（2）為了讓組件Grandson.vue成為Child.vue的子組件，在組件Child.vue的script部分，通過import引入Grandson.vue。importGrandsonfrom"../components/Grandson.vue";（3）在組件Child.vue的script部分，給exportdefault添加一個(gè)components屬性，注冊(cè)組件Grandson。components:{Grandson},（4）在組件Child.vue的template模板部分，使用組件Grandson.vue。<hr/><Grandson/>由于Child.vue是App.vue的子組件，而Grandson.vue又是Child.vue的子組件，因此Grandson.vue就成了App.vue的孫子組件。（5）為了演示從組件App.vue向Grandson.vue傳遞數(shù)據(jù)，在組件App.vue的setup函數(shù)中，聲明變量student。5511.14provide與inject（6）使用reactive函數(shù)，需要引入。在組件App.vue的script部分，通過import引入reactive函數(shù)。import{reactive,ref}from"vue";（7）在return部分，將變量student返回出去。

return{isShow,showMsg,student};（8）在組件App.vue的setup函數(shù)的return前，使用provide函數(shù)向?qū)O子組件Grandson.vue傳遞數(shù)據(jù)。provide("student",student);（9）使用provide函數(shù)，需要引入。在組件App.vue的script部分，通過import引入provide函數(shù)。import{provide,reactive,ref}from"vue";（10）在孫子組件Grandson.vue中，可以通過inject函數(shù)來使用這個(gè)數(shù)據(jù)。使用inject函數(shù)，需要引入。在組件Grandson.vue的script部分，通過import引入inject函數(shù)。import{inject}from"vue";5611.14provide與inject（11）在孫子組件Grandson.vue的script部分的exportdefault里面，先添加一個(gè)setup函數(shù)。在setup函數(shù)中，使用inject函數(shù)接收數(shù)據(jù)，再添加一個(gè)return，將變量student返回出去。（11）在組件Grandson.vue的template模板部分，通過文本插值，顯示接收的數(shù)據(jù)。啟動(dòng)項(xiàng)目并通過瀏覽器訪問

5711.15Vue路由Vue.js路由可用來實(shí)現(xiàn)根據(jù)不同的URL訪問不同的內(nèi)容，從而實(shí)現(xiàn)單頁面富應(yīng)用(SPA)。使用Vue.js路由前需要安裝vue-router。檢查是否安裝vue-router打開項(xiàng)目vue3-demo的package.json文件，查看dependencies字段指定的項(xiàng)目運(yùn)行所依賴的模塊?？梢钥吹竭€沒有安裝vue-router，需要自己安裝。安裝vue-router（1）在VisualStudioCode的終端控制臺(tái)中，輸入命令：

npminstallvue-router@4.0.0-beta.13（2）再次打開package.json文件，可見vue-router安裝成功。5811.15Vue路由示例（1）在項(xiàng)目src目錄下，創(chuàng)建route文件夾，并在route文件夾下創(chuàng)建index.js文件。（2）在index.js文件中，從vue-router中引入createRouter和createWebHistory這兩個(gè)函數(shù)。import{createRouter,createWebHistory}from"vue-router";（3）在項(xiàng)目vue3-demo的components目錄下，創(chuàng)建Cart.vue和List.vue兩個(gè)組件。組件Cart.vue內(nèi)容：組件List.vue內(nèi)容：5911.15Vue路由（4）在index.js中，引入Cart.vue和List.vue兩個(gè)組件，使用createWebHistory函數(shù)從哈希模式切換到history模式，再使用createRouter創(chuàng)建路由器，它接受一個(gè)對(duì)象，history屬性值設(shè)置為routerHistory，routes屬性值是一個(gè)數(shù)組，用來指定路由匹配列表，每一個(gè)路由映射一個(gè)組件，最后導(dǎo)出router。（5）修改ma