您好,登錄后才能下訂單哦!
這篇文章主要講解了“Vue中的偵聽器及使用場(chǎng)景是什么”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“Vue中的偵聽器及使用場(chǎng)景是什么”吧!
計(jì)算屬性允許我們聲明性地計(jì)算衍生值。然而在有些情況下,我們需要在狀態(tài)變化時(shí)執(zhí)行一些“副作用”:例如更改 DOM,或是根據(jù)異步操作的結(jié)果去修改另一處的狀態(tài)。
在選項(xiàng)式 API 中,我們可以使用watch 選項(xiàng)在每次響應(yīng)式屬性發(fā)生變化時(shí)觸發(fā)一個(gè)函數(shù)。
export default { data() { return { question: '', answer: 'Questions usually contain a question mark. ;-)' } }, watch: { // 每當(dāng) question 改變時(shí),這個(gè)函數(shù)就會(huì)執(zhí)行 question(newQuestion, oldQuestion) { if (newQuestion.includes('?')) { this.getAnswer() } } }, methods: { async getAnswer() { this.answer = 'Thinking...' try { const res = await fetch('https://yesno.wtf/api') this.answer = (await res.json()).answer } catch (error) { this.answer = 'Error! Could not reach the API. ' + error } } } }
<p> Ask a yes/no question: <input v-model="question" /> </p> <p>{{ answer }}</p>
watch
選項(xiàng)也支持把鍵設(shè)置成用.
分隔的路徑:
export default { watch: { // 注意:只能是簡(jiǎn)單的路徑,不支持表達(dá)式。 'some.nested.key'(newValue) { // ... } } }
watch
默認(rèn)是淺層的:被偵聽的屬性,僅在被賦新值時(shí),才會(huì)觸發(fā)回調(diào)函數(shù)——而嵌套屬性的變化不會(huì)觸發(fā)。如果想偵聽所有嵌套的變更,你需要深層偵聽器:
export default { watch: { someObject: { handler(newValue, oldValue) { // 注意:在嵌套的變更中, // 只要沒有替換對(duì)象本身, // 那么這里的 `newValue` 和 `oldValue` 相同 }, deep: true } } }
謹(jǐn)慎使用
深度偵聽需要遍歷被偵聽對(duì)象中的所有嵌套的屬性,當(dāng)用于大型數(shù)據(jù)結(jié)構(gòu)時(shí),開銷很大。因此請(qǐng)只在必要時(shí)才使用它,并且要留意性能。
watch
默認(rèn)是懶執(zhí)行的:僅當(dāng)數(shù)據(jù)源變化時(shí),才會(huì)執(zhí)行回調(diào)。但在某些場(chǎng)景中,我們希望在創(chuàng)建偵聽器時(shí),立即執(zhí)行一遍回調(diào)。舉例來說,我們想請(qǐng)求一些初始數(shù)據(jù),然后在相關(guān)狀態(tài)更改時(shí)重新請(qǐng)求數(shù)據(jù)。
我們可以用一個(gè)對(duì)象來聲明偵聽器,這個(gè)對(duì)象有handler
方法和immediate: true
選項(xiàng),這樣便能強(qiáng)制回調(diào)函數(shù)立即執(zhí)行:
export default { // ... watch: { question: { handler(newQuestion) { // 在組件實(shí)例創(chuàng)建時(shí)會(huì)立即調(diào)用 }, // 強(qiáng)制立即執(zhí)行回調(diào) immediate: true } } // ... }
回調(diào)函數(shù)的初次執(zhí)行就發(fā)生在created
鉤子之前。Vue 此時(shí)已經(jīng)處理了data,
computed
和methods
選項(xiàng),所以這些屬性在第一次調(diào)用時(shí)就是可用的。
當(dāng)你更改了響應(yīng)式狀態(tài),它可能會(huì)同時(shí)觸發(fā) Vue 組件更新和偵聽器回調(diào)。
默認(rèn)情況下,用戶創(chuàng)建的偵聽器回調(diào),都會(huì)在 Vue 組件更新之前被調(diào)用。這意味著你在偵聽器回調(diào)中訪問的 DOM 將是被 Vue 更新之前的狀態(tài)。
如果想在偵聽器回調(diào)中能訪問被 Vue 更新之后的 DOM,你需要指明flush: 'post'
選項(xiàng):
export default { // ... watch: { key: { handler() {}, flush: 'post' } } }
我們也可以使用組件實(shí)例的$watch() 方法來命令式地創(chuàng)建一個(gè)偵聽器:
export default { created() { this.$watch('question', (newQuestion) => { // ... }) } }
如果要在特定條件下設(shè)置一個(gè)偵聽器,或者只偵聽響應(yīng)用戶交互的內(nèi)容,這方法很有用。它還允許你提前停止該偵聽器。
用watch
選項(xiàng)或者$watch()
實(shí)例方法聲明的偵聽器,會(huì)在宿主組件卸載時(shí)自動(dòng)停止。因此,在大多數(shù)場(chǎng)景下,你無需關(guān)心怎么停止它。
在少數(shù)情況下,你的確需要在組件卸載之前就停止一個(gè)偵聽器,這時(shí)可以調(diào)用$watch()
API 返回的函數(shù):
const unwatch = this.$watch('foo', callback) // ...當(dāng)該偵聽器不再需要時(shí) unwatch()
感謝各位的閱讀,以上就是“Vue中的偵聽器及使用場(chǎng)景是什么”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)Vue中的偵聽器及使用場(chǎng)景是什么這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。