在vue2中,我們可以使用watch{}來監(jiān)聽data數(shù)據(jù)中特定的值,寫法也很簡單。基本上,所有的監(jiān)聽都要寫成如下函數(shù)形式,函數(shù)接收兩個(gè)參數(shù),一個(gè)是newvalue,另一個(gè)是oldvalue,分別代表新值和舊值,但在vue3中,我們所有的監(jiān)聽不會寫在一起,而是我們需要監(jiān)聽一個(gè)數(shù)據(jù)就需要寫一個(gè)watch。
官方對vue3中的watch可監(jiān)視對象做了以下限制。簡而言之,就是只能是響應(yīng)式數(shù)據(jù),一個(gè)有返回值的函數(shù),和包含響應(yīng)式數(shù)據(jù)或者函數(shù)的數(shù)組。同樣的,vue3中的watch也有深度監(jiān)聽deep和初始監(jiān)聽immeaidte。需要注意的是如果你監(jiān)聽的是reactive監(jiān)聽的數(shù)據(jù),是自動(dòng)開啟深度監(jiān)聽的。
vue3中的監(jiān)聽寫法為:
watch(監(jiān)聽的數(shù)據(jù),(newvalue,oldvalue)=》{ console.log(當(dāng)監(jiān)聽數(shù)據(jù)改變時(shí)觸發(fā)的函數(shù)內(nèi)容) })
還有一個(gè)需要注意的問題,當(dāng)我們監(jiān)聽的響應(yīng)式對象中的某個(gè)數(shù)據(jù),而且這個(gè)數(shù)據(jù)是對象類型,當(dāng)我們改變對象中的內(nèi)容時(shí),監(jiān)聽會正常觸發(fā),但是當(dāng)我們修改整個(gè)對象,如果不寫成函數(shù)式,監(jiān)聽是不會觸發(fā)的。如果監(jiān)聽的不是對象類型而是普通類型,則沒有上述問題。
所以,我推薦大家監(jiān)聽時(shí),監(jiān)聽的數(shù)據(jù)都要寫成函數(shù)式。
了解更多vue3知識點(diǎn)這里。