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

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

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

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

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

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

n思路三的實(shí)現(xiàn)：computedp注意：計(jì)算屬性看起來(lái)像是一個(gè)函數(shù)，但是我們?cè)谑褂玫臅r(shí)候不需要加()，這個(gè)后面講setter和getterpp

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

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

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

n你可能覺(jué)得很奇怪，Vue內(nèi)部是如何對(duì)我們傳入的是一個(gè)getter，還是說(shuō)是一個(gè)包含setter和getter的對(duì)象進(jìn)行處p事實(shí)上非常的簡(jiǎn)單，Vue

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

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

np當(dāng)我們點(diǎn)擊按鈕的時(shí)候會(huì)修改p這個(gè)時(shí)候我們使用watch來(lái)偵聽(tīng)info，可以偵聽(tīng)到嗎？答案是不可以n這是因?yàn)槟J(rèn)情況下，watch只是在偵聽(tīng)info 變化，對(duì)于內(nèi)部屬性的變化是不會(huì)做出響應(yīng)的p這個(gè)時(shí)候我們可以使用一個(gè)選項(xiàng)deep進(jìn)行 的偵聽(tīng)p注意前面我 watch里面?zhèn)陕?tīng)的屬性對(duì)應(yīng)的也可以是一個(gè)n還有另外一個(gè)屬性，是希望一開(kāi)始的就會(huì)立即執(zhí)行一次p這個(gè)時(shí)候我們使用immediate選項(xiàng)pn

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

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

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

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

n我們?cè)賮?lái)綁定一下其他的表單類(lèi)型：textarea、checkbox、radio、n我們來(lái)看一下綁定

n我們來(lái)看一下v-model綁定checkboxnpv-modelp此時(shí)input的value并不影響v-modelnp當(dāng)是多個(gè)復(fù)選框時(shí)，因?yàn)榭梢赃x中多個(gè)，所以對(duì)應(yīng)的datap當(dāng)選中某一個(gè)時(shí)，就會(huì)將input的value

nv-model綁定radio

npv-modelnpv-model

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

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

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