vue 偵聽器watch 之 深度監聽 deep

2022-07-21 01:18:13 字數 781 閱讀 3035

fullname: }

firstname: "

text

" v-model="

person.firstname

">

結果:

handler 方法就相當於普通偵聽器觸發的事件,從結果可以看到,元件初始化的時候,偵聽器並沒有handler方法  所以fullname是沒有值的

當修改以上**,加上immediate: true,元件初始化的時候,偵聽器會立馬(immediate)觸發handler方法
結果:
當在輸入框中輸入資料時, 可以發現fullname的值並沒有隨之改變

結果:

這是因為vue無法檢測到物件內部屬性值的變化 比如person.firstname的變化

所以此時 需要用到vue的深度監聽(deep) 

此時加上**  deep: true

可以發現 每次輸入框資料變化  fullname隨之改變

結果:

VUE 監聽當前路由 偵聽器 watch

偵聽器 你可以利用偵聽器,響應資料的變化,例如路由,和頁面中data的值,可以在他們變化的時候寫相應的處理邏輯在偵聽器中。偵聽器的使用很簡單 watch 物件就是偵聽器,只有當偵聽的值改變了它才會執行。data watch 解析 在data中申明了msg變數為空字串,在watch偵聽器物件裡面建立了...

Vue3 0學習筆記 偵聽器Watch

偵聽器 watch watch 偵聽器 可以監聽 data中資料的變化 watch裡面的名字就是用資料的名字 可以接受兩個引數 current 變化後的值 prev 變化之前的值 watch message current,prev watch和computed的區別 computed在頁面渲染的同...

Vue中Watch偵聽器的簡單用法

目錄 1.computed計算屬性 1.1.computed的簡單例子 1.2.computed計算屬性的setter 2.watch偵聽器 2.1.簡單的watch偵聽 2.2.handler immediate 2.3.監聽物件 陣列等 deep屬性 2.4.監聽字串形式 2.5.監聽多個物件 ...