vue中監聽資料變化 watch

2022-09-02 07:24:09 字數 885 閱讀 5490

今天做專案的時候,子元件中資料(原本固定的資料)需要父元件動態傳入,如果一開始初始化用到的資料、但當時還沒有獲取到,初始化結束就不會更新資料了。只有監聽這兩個屬性,再重新執行初始化。

1、watch是乙個物件,物件就有鍵跟值,

鍵就是我們要監聽的資料,

值可以是函式:當我們監聽的資料發生變化時,需要執行的函式,這個函式有兩個形參,第乙個是當前的值,第二個是變化後的值;

值也可以是method中的函式名:函式名要用引號來包裹

值也可以是包括選項的物件,老厲害了,老厲害了

選項包含三個:

a、第乙個值handle:其值是乙個**函式,就是監聽物件對話的時候需要執行的函式

b、第二個值deep:其值true 或者 false,是否深度監聽(一般監聽是不能監聽到物件屬性值變化的,陣列除外)

c、第三個值immediate:其值 true 或者 false,是否以當前的初始值執行handle函式(當值第一次繫結時,不會執行監聽函式,只有值發生改變時才會執行。如果我們需要在最初繫結值的時候也執行函式,則就需要用到immediate屬性。)。

(1)通過watch監聽data資料的變化,資料發生變化時,就會列印當前的值

watch: 

}

(2)通過watch監聽docdata資料的變化,資料發生變化時,this.change_number++(使用深度監聽)

watch: ,

deep:

true,

immediate: false,

}}

(3)通過watch監聽data資料的變化,資料發生變化時,執行changedata方法

watch: ,

methods:

}

vue通過watch監聽資料變化

一 通過watch來監聽資料變化,並通過列印顯示 personal center text placeholder 請輸入 v model inputval export default watch 效果圖 二 首次渲染開啟監聽 按上面的 實現,網頁眉次渲染是不會啟動監聽的,如果我們需要第一次渲染變...

vue中watch監聽屬性詳解

使用方法 watch 2 通過watch監聽docdata資料的變化,資料發生變化時,this.change number 使用深度監聽 watch deep true 通過watch監聽data資料的變化,資料發生變化時,執行changedata方法 watch methods 2 詳解watch...

watch監聽多個值的變化

一 watch簡單使用 watch是乙個scope函式,用於監聽模型變化,當你的模型部分發生變化時它會通知你。1 watch watchexpression,listener,objectequality 每個引數的說明如下 watchexpression 監聽的物件,它可以是乙個angular表示...