vue的watch是什么及怎么使用

本篇內(nèi)容介紹了“vue的watch是什么及怎么使用”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

十年的潮州網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整潮州建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“潮州網(wǎng)站設(shè)計(jì)”,“潮州網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

在vue中，watch用于監(jiān)聽data里面的數(shù)據(jù)是否被修改，一旦修改就可以執(zhí)行一些其他的操作。watch是vue內(nèi)部提供的一個(gè)用于偵聽功能的通用的方法，可響應(yīng)數(shù)據(jù)的變化，通過特定的數(shù)據(jù)變化驅(qū)動(dòng)一些操作。

watch是用來做什么的？

Vue 通過 watch 選項(xiàng)提供了一個(gè)更通用的方法，來響應(yīng)數(shù)據(jù)的變化。當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，這個(gè)方式是最有用的。

watch是什么？

一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。值也可以是方法名，或者包含選項(xiàng)的對(duì)象。Vue 實(shí)例將會(huì)在實(shí)例化時(shí)調(diào)用 $watch()，遍歷 watch 對(duì)象的每一個(gè) property。文檔傳送

示例：

vue的watch是什么及怎么使用

watch的使用方法

第一種：常規(guī)用法

（1）把要監(jiān)聽的name值看作方法名，來進(jìn)行監(jiān)聽?！镜谝环N寫法】

vue的watch是什么及怎么使用

（2）把要監(jiān)聽的name值看作對(duì)象，利用hanler方法來進(jìn)行監(jiān)聽?！镜诙N寫法】

以上兩種寫法是watch監(jiān)聽器的普通用法，這種用法有一個(gè)特點(diǎn)，就是當(dāng)值第一次綁定的時(shí)候，不會(huì)執(zhí)行監(jiān)聽函數(shù)，只有當(dāng)值發(fā)生改變時(shí)才會(huì)執(zhí)行。如果我們需要在最初綁定值的時(shí)侯，也執(zhí)行監(jiān)聽函數(shù)，則就需要用到immediate屬性。
下面，我們就往高級(jí)一點(diǎn)的用法上講。

第二種：高級(jí)用法

比如，當(dāng)父組件向子組件動(dòng)態(tài)傳值時(shí)，子組件props首次獲取到父組件傳來的默認(rèn)值時(shí)，也需要執(zhí)行函數(shù)，此時(shí)就需要將immediate屬性設(shè)置為true，結(jié)合handler方法使用。

當(dāng)設(shè)置immediate屬性為true時(shí)，無論值是否發(fā)生改變，時(shí)刻都會(huì)監(jiān)聽；

當(dāng)設(shè)置immediate屬性為false時(shí)，常規(guī)用法，只有值發(fā)生改變才會(huì)監(jiān)聽。

立即執(zhí)行：

vue的watch是什么及怎么使用

值改變時(shí)：

vue的watch是什么及怎么使用

第三種：超高級(jí)用法（deep 深度監(jiān)聽）

（1）監(jiān)聽普通變量的變化可以使用以上兩種方法，但是要監(jiān)聽變量值是某對(duì)象的時(shí)候，則不起作用。

例如，我們監(jiān)聽form對(duì)象內(nèi)部屬性的變化，是監(jiān)聽不到的。

vue的watch是什么及怎么使用

則，從結(jié)果來看，我們沒有看到任何的輸出打印，所以普通的watch方法無法監(jiān)聽到對(duì)象內(nèi)部屬性的變化。

那么，我們?cè)撛趺崔k才能監(jiān)聽到對(duì)象內(nèi)部屬性的變化呢？

watch方法提供了一個(gè)deep屬性（深度監(jiān)聽），該屬性可以監(jiān)聽到對(duì)象內(nèi)部屬性的改變。

vue的watch是什么及怎么使用

設(shè)置deep: true 則可以監(jiān)聽到form的變化，如果form有較多屬性的話，此時(shí)會(huì)給form的所有屬性都會(huì)加上這個(gè)監(jiān)聽器，每個(gè)屬性值的變化都會(huì)執(zhí)行handler。
當(dāng)deep屬性值為true時(shí)，就可以監(jiān)聽到對(duì)象屬性內(nèi)部的改變；
當(dāng)deep屬性值為false時(shí)，則監(jiān)聽不到。

（2）如果只需要監(jiān)聽對(duì)象中的某一個(gè)屬性值時(shí)，我們可以使用：字符串的形式監(jiān)聽對(duì)象屬性，

這個(gè)監(jiān)聽過程，不需要使用deep去深度監(jiān)聽，就可以監(jiān)聽對(duì)象中某個(gè)屬性的變化。

vue的watch是什么及怎么使用