欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中的watch監(jiān)聽數據變化及watch中各屬性的詳解

 更新時間:2018年09月11日 15:39:20   作者:Forward_wuyi  
這篇文章主要介紹了vue中的watch監(jiān)聽數據變化及watch中的immediate、handler和deep屬性詳解,本文大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友參考下吧

首先確認 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中各屬性的詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

相關文章

  • VUE跳轉外部鏈接與網頁的方法示例

    VUE跳轉外部鏈接與網頁的方法示例

    這篇文章主要給大家介紹了關于VUE跳轉外部鏈接與網頁的方法,記錄一下在vue項目中如何實現跳轉到一個新頁面,需要的朋友可以參考下
    2023-06-06
  • Vuex持久化存儲之vuex-persist問題

    Vuex持久化存儲之vuex-persist問題

    這篇文章主要介紹了Vuex持久化存儲之vuex-persist問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • uniapp實現紅包動畫效果代碼實例(vue3)

    uniapp實現紅包動畫效果代碼實例(vue3)

    uniapp作為一種基于Vue.js的前端框架,實現了一套代碼多端運行的理念,成為了眾多開發(fā)者的首選,下面這篇文章主要給大家介紹了關于uniapp實現紅包動畫效果的相關資料,需要的朋友可以參考下
    2024-01-01
  • vuejs指令詳解

    vuejs指令詳解

    本文介紹了vuejs指令的相關知識,具有很好的參考價值,下面跟著小編一起來看下吧
    2017-02-02
  • vue中安裝使用cesium方式(親測可用)

    vue中安裝使用cesium方式(親測可用)

    這篇文章主要介紹了vue中安裝使用cesium方式(親測可用),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • vue.js實現圖書管理功能

    vue.js實現圖書管理功能

    這篇文章主要為大家詳細介紹了vue.js實現圖書管理功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • 基于element-ui封裝可搜索的懶加載tree組件的實現

    基于element-ui封裝可搜索的懶加載tree組件的實現

    這篇文章主要介紹了基于element-ui封裝可搜索的懶加載tree組件的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-05-05
  • vue如何導出json數據為excel表格并保存到本地

    vue如何導出json數據為excel表格并保存到本地

    這篇文章主要介紹了vue如何導出json數據為excel表格并保存到本地問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • 使用vue自定義指令開發(fā)表單驗證插件validate.js

    使用vue自定義指令開發(fā)表單驗證插件validate.js

    今天就來介紹一下如何利用vue的自定義指令directive來開發(fā)一個表單驗證插件的過程,需要的朋友可以參考下
    2019-05-05
  • vue獲取或者改變vuex中的值方式

    vue獲取或者改變vuex中的值方式

    這篇文章主要介紹了vue獲取或者改變vuex中的值方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09

最新評論