vue中的watch監(jiān)聽數據變化及watch中各屬性的詳解
首先確認 watch是一個對象,一定要當成對象來用。
對象就有鍵,有值。
鍵:就是你要監(jiān)控的那個家伙,比如說$route,這個就是要監(jiān)控路由的變化。或者是data中的某個變量。
值可以是函數:就是當你監(jiān)控的家伙變化時,需要執(zhí)行的函數,這個函數有兩個形參,第一個是當前值,第二個是變化后的值。
值也可以是函數名:不過這個函數名要用單引號來包裹。
第三種情況厲害了。
值是包括選項的對象:選項包括有三個。
1.第一個handler:其值是一個回調函數。即監(jiān)聽到變化時應該執(zhí)行的函數。
2.第二個是deep:其值是true或false;確認是否深入監(jiān)聽。(一般監(jiān)聽時是不能監(jiān)聽到對象屬性值的變化的,數組的值變化可以聽到。)
3.第三個是immediate:其值是true或false;確認是否以當前的初始值執(zhí)行handler的函數。
1、watch使用的幾種方法
(1)通過watch監(jiān)聽data數據的變化,數據發(fā)生變化時,就會打印當前的值
watch: { data(val, newval) { console.log(val) console.log(newval) } }
(2)通過watch監(jiān)聽docData數據的變化,數據發(fā)生變化時,this.change_number++(使用深度監(jiān)聽)
watch: { docData: { handler(newVal) { this.change_number++ }, deep: true } }
(3)通過watch監(jiān)聽data數據的變化,數據發(fā)生變化時,執(zhí)行changeData方法
watch: { data: 'changeData' // 值可以為methods的方法名 }, methods: { changeData(curVal,oldVal){ conosle.log(curVal,oldVal) } }
2、詳解watch中的immediate、handler和deep屬性
(1)immediate和handler
這樣使用watch時有一個特點,就是當值第一次綁定時,不會執(zhí)行監(jiān)聽函數,只有值發(fā)生改變時才會執(zhí)行。如果我們需要在最初綁定值的時候也執(zhí)行函數,則就需要用到immediate屬性。
eg:
watch: { docData: { handler(newVal) { this.change_number++ }, immediate: true } }
(2)deep
當需要監(jiān)聽一個對象的改變時,普通的watch方法無法監(jiān)聽到對象內部屬性的改變,此時就需要deep屬性對對象進行深度監(jiān)聽。
eg: data() { return { docData: { 'doc_id': 1, 'tpl_data': 'abc' } } }, watch: { docData: { handler(newVal) { this.change_number++ }, deep: true } }
設置deep:true則可以監(jiān)聽到docData.doc_id的變化,此時會給docData的所有屬性都加上這個監(jiān)聽器,當對象屬性較多時,每個屬性值的變化都會執(zhí)行handler。如果只需要監(jiān)聽對象中的一個屬性值,則可以做以下優(yōu)化:使用字符串的形式監(jiān)聽對象屬性:
eg: data() { return { docData: { 'doc_id': 1, 'tpl_data': 'abc' } } }, watch: { 'docData.doc_id': { handler(newVal, oldVal) { ...... }, deep: true } }
這樣只會給對象的某個特定的屬性加監(jiān)聽器
3、總結
數組(一維、多維)的變化不需要通過深度監(jiān)聽,對象數組中對象的屬性變化則需要deep深度監(jiān)聽。
以上所述是小編給大家介紹的vue中的watch監(jiān)聽數據變化及watch中各屬性的詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
相關文章
基于element-ui封裝可搜索的懶加載tree組件的實現
這篇文章主要介紹了基于element-ui封裝可搜索的懶加載tree組件的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-05-05使用vue自定義指令開發(fā)表單驗證插件validate.js
今天就來介紹一下如何利用vue的自定義指令directive來開發(fā)一個表單驗證插件的過程,需要的朋友可以參考下2019-05-05