coderwhy vue3typescript版課堂day vue3options apin我們知道在模板中可以直接通過插值語法顯示一些data數(shù)據(jù)

n我們知道，在模板中可以直接通過插值語法顯示一些data中的數(shù)據(jù)n但是在某些情況，我們可能需要對數(shù)據(jù)進行一些轉(zhuǎn)化后再顯示，或者需要將多個數(shù)據(jù)結(jié)合起來p比如我們需要對多個data數(shù)據(jù)進行運算、三元運算符來決定結(jié)果、數(shù)據(jù)進行某種轉(zhuǎn)化p在模板中使用表達(dá)式，可以非常方便的實現(xiàn)，但是設(shè)計它們的初衷是用于簡單的運算p在模板中放入太多的邏輯會讓模板過重和難 pn我們有沒有什么方法可以將邏 出去呢p可以，其 式就是將邏輯抽取到一個method中，放到methods的options中p但是，這種做法有一個直觀的弊端，就是所有的data使用過程都會變成了一個方法的調(diào)用p另 式就是使用計算屬性

n p而是說：對于任何包含響應(yīng)式數(shù)據(jù)的復(fù)雜邏輯，你都應(yīng)該使用計算屬性p計算屬性將被混入到組件實例中。所有g(shù)etter和setter的thisnpp類型：{[key:string]:Function|{get:Function,set:Functionn

nn案例一：我們有兩個變量：firstName和lastName，n案例二：我們有一個分?jǐn)?shù)p當(dāng)score大于60p當(dāng)score小于60n案例三：我們有一個變量message，記錄一段文字：比 oppnp思路一：在模板語法中直接使用表達(dá)式；p思路二：使用method對邏輯進行抽??；p思路三：使用計算屬性computed；

np缺點一：模板中存在大量的復(fù)雜邏輯，不便 （模板中表達(dá)式的初衷是用于簡單的計算pp

n思路二的實現(xiàn)：methodp缺點一：我們事實上先顯示的是一個結(jié)果，但是都變成 法的調(diào)用p

n思路三的實現(xiàn)：computedp注意：計算屬性看起來像是一個函數(shù)，但是我們在使用的時候不需要加()，這個后面講setter和getterpp

vsn在上面的實現(xiàn)思路中，我們會發(fā)現(xiàn)計算屬性和methods的實現(xiàn)看起來是差別是不大的，而且我們多次提到計算屬n接下來我們來看一下同一個計算多次使用，計算屬性和methods

np這是因為計算屬性會基于它們的依賴關(guān)系進行緩存p在數(shù)據(jù)不發(fā)生變化時，計算屬性是不需要重新計算p但是如果依賴的數(shù)據(jù)發(fā)生變化，在使用時，計算屬性依然會重新進行計算

n計算屬性在大多數(shù)情況下，只需要一個getter方法即可，所以我們會將計算屬性直接寫成一個函數(shù)n但是，如果我們確實想設(shè)置計算屬性的值p這個時候我們也可以給計算屬性設(shè)置一個setter的方法

n你可能覺得很奇怪，Vue內(nèi)部是如何對我們傳入的是一個getter，還是說是一個包含setter和getter的對象進行處p事實上非常的簡單，Vue

n什么是 呢p開發(fā)中我們在data返回的對象中定義了數(shù)據(jù)，這個數(shù)據(jù)通過插值語法等方式綁定到 p當(dāng)數(shù)據(jù)變化時 te會自動進行更新來顯 的數(shù)據(jù)p但是在某些情況下，我們希望在代碼邏輯 某個數(shù)據(jù)的變化，這個時候就需要用 watch來完成了n 的用法如下pp類型：{[key:string]:string|Function|Object|

n舉個栗子（例子p比如現(xiàn)在我們希望用戶在input中輸入一個問題p每當(dāng)用戶輸入 的內(nèi)容，我們就獲取 的內(nèi)容，并且使用該問題去服務(wù)器查詢答案p那么，我們就需要實時的去獲 的數(shù)據(jù)變化

np當(dāng)我們點擊按鈕的時候會修改p這個時候我們使用watch來偵聽info，可以偵聽到嗎？答案是不可以n這是因為默認(rèn)情況下，watch只是在偵聽info 變化，對于內(nèi)部屬性的變化是不會做出響應(yīng)的p這個時候我們可以使用一個選項deep進行 的偵聽p注意前面我 watch里面?zhèn)陕牭膶傩詫?yīng)的也可以是一個n還有另外一個屬性，是希望一開始的就會立即執(zhí)行一次p這個時候我們使用immediate選項pn

n另外一個是Vue3文檔中沒有提到的，但是Vue2n還有另 式就是使用$watch的n我們可以在created的生命周期（后續(xù)會講到）中，使用this.$watchs來偵聽；pp第二個參數(shù)是偵聽的回調(diào)函數(shù)p第三個參數(shù)是額外的其他選項，比如deep、

n現(xiàn)在我們來做一個相對綜合一點的練習(xí)：np1.p2.p3.點擊+或者-可以增加或減少書籍?dāng)?shù)量（如果為1，那么不能繼續(xù)-p4.點擊移除按鈕，可以將書籍移除（當(dāng)所有的書籍移除完畢時，顯示：購物車為空

n表單提交是開發(fā)中非常常見的功能，也是和用戶交互的重 p比如用戶在登錄 時需要提交賬 p比如用戶在檢索、創(chuàng)建、更新n這些都要求我們可以在代碼邏輯中獲取到用戶提交的數(shù)據(jù)，我們通常會使用v-model指令pvmodel指令可以在表單input、textarea以及select元素上創(chuàng)建雙向數(shù)據(jù)綁定p它會根據(jù)控件類型p盡管有些神奇，但v-model本質(zhì)上不過是語法糖，它負(fù)責(zé)

有說到，v-model的原理pvbind綁定valuepv-on綁定 到函數(shù)中，函數(shù)會獲 的值賦值到綁定的屬性中

n我們再來綁定一下其他的表單類型：textarea、checkbox、radio、n我們來看一下綁定

n我們來看一下v-model綁定checkboxnpv-modelp此時input的value并不影響v-modelnp當(dāng)是多個復(fù)選框時，因為可以選中多個，所以對應(yīng)的datap當(dāng)選中某一個時，就會將input的value

nv-model綁定radio

npv-modelnpv-model

n目前我 面的案例中大部分的值都是在 te中固定好的p比如gender的兩個輸入框值male、p比如hobbies的三個輸入框值basketball、football、n在真實開發(fā)中，我們的數(shù)據(jù)可能是來自服務(wù)器的，那么我們就可以先將值請求下來，綁定到data返回的對象中，p這里不再給出具體的做法，因為還是v-bind

v-modelnlazyp默認(rèn)情況下，v-model在進行雙向綁定時，綁定的是input p如果我們在v-model后跟上lazy修飾符，那么會將綁定的 切換為change

v-modeln我們先來看一下v-modelpmessage總是string類型，即使在我們設(shè)置type為number也是string類型n如果我們希望轉(zhuǎn)換為數(shù)字類