上節課的**可以說沒什麼章法可言，所有的變數和方法都混淆在一起，我最不能忍受的是在setup中要改變和讀取乙個值的時候，還要加上value。這種**一定是可以優化的，需要引入乙個新的 apireactive。它也是乙個函式(方法)，只不過裡邊接受的引數是乙個 object(物件)。
然後無論是變數和方法，都可以作為 object 中的乙個屬性，而且在改變selectgirl值的時候也不用再加討厭的value屬性了。再return返回的時候也不用乙個個返回了，只需要返回乙個data,就可以了。
lang
="ts"
>
import
from
"vue"
;export
default,}
);return;}
,};script
>
修改完成部分的**後，還需要修改template部分的**，因為我們這時候返回的只有data,所以模板部分的字面量前要加入data。
>
alt=
"vue logo"
src="./assets/logo.png"
/>
>
>
歡迎光臨紅浪漫洗浴中心h2
>
>
請選擇一位美女為你服務div
>
div>
>
v-for
="(item, index) in data.girls"
v-bind:key
="index"
@click
="data.selectgirlfun(index)"
>
} : }
button
>
div>
>
你選擇了【}】為你服務div
>
template
>
這個修改完成後，可以在terminal終端裡開啟yarn serve,檢視一下效果了，如果沒有錯誤，應該和原來的效果一樣。效果雖然一樣，但是這時候**，要比上節課優雅了很多。著一些的功勞要歸屬於reactive函式。
給 data 增加型別註解
這時的**雖然可以完美的執行，但是細心的小夥伴可以發現data這個變數，我們並沒有作型別註解，而是採用了typescript的型別推斷。
這樣的**，在我們公司是不允許出現的，必須要增加型別註解。所以我們先定義乙個介面,用介面(inte***ce)來作型別註解。
inte***ce
dataprops
cosnt data: dataprops =
...
用 torefs()繼續優化
現在template中，每次輸出變數前面都要加乙個data,這是可以優化的。有的小夥伴說了，我用…擴充套件運算子就可以解決這個問題了。
在這裡我就可以告訴你不行，因為結構後就變成了普通變數，不再具有響應式的能力。所以要解決這個問題，需要使用 vue3 的乙個新函式torefs()。使用前需要先進行引入。
import
from
"vue"
;
export
default
;const data: dataprops =
reactive(,
});const refdata =
torefs
(data)
;return;}
,};
>
alt=
"vue logo"
src="./assets/logo.png"
/>
>
>
歡迎光臨紅浪漫洗浴中心h2
>
>
請選擇一位美女為你服務div
>
div>
>
v-for
="(item, index) in girls"
v-bind:key
="index"
@click
="selectgirlfun(index)"
>
} : }
button
>
div>
>
你選擇了【}】為你服務div
>
template
>
如何選擇 ref()和 reactive()
網路上對這兩個方法的爭論還是不少的，但到目前為止，還沒有什麼實質性的理論到底是用ref()好，還是reactive()好，也就是兩種方法都可以。他們的作用都是生成響應式物件，目前來看只是編寫上有所不同。
我個人更傾向於使用reactive(),因為它讓程式看起來更規範。如果你學到這裡還猶豫不定，也沒關係，隨著你進一步的深入學習，一定會有你自己的最佳選擇。
vue3 版本的生命週期和 vue2 比有了些變化，所以我先站在乙個初學者的角度（沒有學過 vue2 版本的新手），從新講一下 vue3.x 的生命週期，等你完全理解之後，我們再來和 vue2.x 的生命週期作乙個對比。
什麼是生命週期
vue 是元件化程式設計，從乙個元件誕生到消亡，會經歷很多過程，這些過程就叫做生命週期。
來個比喻，生命週期和人從出生到入土是一樣的。有少年時期、有青年時期、有中年時期、有老年時期。每個時期都應該有不同的任務，可以作不同的事。
當你理解了什麼是生命週期，你還了解乙個概念「鉤子函式」。
setup() :開始建立元件之前，在beforecreate和created之前執行。建立的是data和method
onbeforemount() : 元件掛載到節點上之前執行的函式。
onmounted() : 元件掛載完成後執行的函式。
onbeforeupdate(): 元件更新之前執行的函式。
onupdated(): 元件更新完成之後執行的函式。
onbeforeunmount(): 元件解除安裝之前執行的函式。
onunmounted(): 元件解除安裝完成後執行的函式
onactivated(): 被包含在>
中的元件，會多出兩個生命週期鉤子函式。被啟用時執行。
ondeactivated(): 比如從 a 元件，切換到 b 元件，a 元件消失時執行。
onerrorcaptured(): 當捕獲乙個來自子孫元件的異常時啟用鉤子函式（以後用到再講，不好展現）。
vue3.x 生命週期在呼叫前需要先進行引入,我們先暫時演示前五個生命週期。
import
from
"vue"
;
為了看出鉤子函式執行的時機，我在setup()函式裡，編寫了下面的**：
lang
="ts"
>
//....,}
);onbeforemount((
)=>);
onmounted((
)=>);
onbeforeupdate((
)=>);
onupdated((
)=>);
const refdata =
torefs
(data)
;return;}
,};export
script
>
寫完後可以到瀏覽器看一下效果，效果和你想象的應該是一樣的。
1 - 開始建立元件---- - setup();
2 - 元件掛載到頁面之前執行---- - onbeforemount();
3 - 元件掛載到頁面之後執行---- - onmounted();
4 - 元件更新之前---- - onbeforeupdate();
5 - 元件更新之後---- - onupdated();
你這時候一定會有個疑問，那vue2.x版本的生命週期函式還可以使用嗎?答案是肯定的。
你可以在setup()函式之後編寫vue2的生命週期函式，**如下：
beforecreate()
,beforemount()
,mounted()
,beforeupdate()
,updated()
,
TypeScript在Vue中的嘗試
vue官方文件中，對typescript做支援，目前我們可以使用typescript的語法，進行vue專案的開發。這個外掛程式是vue官方維護的外掛程式，目前支援基於class的語法規則。1 直接在類中申明data資料。舊的方式 export default 使用class的方式 import co...
3 typescript類的定義
一 ts中定義類 class person run void var p new person 張三 p.run 二 ts中實現繼承 extends super class person run string在運動 var p new person 王五 alert p.run class web ...
3 typeScript中的函式
函式的定義 es5的定義 方法 函式宣告法 function run 函式表示式 var run2 function ts中定數的方法 函式宣告法 function run string 錯誤寫法 function run2 string 函式表示式 var fun2 function number...