vue2.0 watch里面的 deep和immediate用法說明
deep，默認(rèn)值是 false，代表是否深度監(jiān)聽。
immediate:true代表如果在 wacth 里聲明了之后，就會(huì)立即先去執(zhí)行里面的handler方法，如果為 false就跟我們以前的效果一樣，不會(huì)在綁定的時(shí)候就執(zhí)行。
computed: {
btnObj() {
const { sign_img, check } = this
return {
sign_img,
check
}
}
},
watch: {
btnObj: {
handler: function(newVal,oldVal) {
if(!!this.sign_img && this.check){
this.submit_flag = true
this.sign_flag = '1'
}else{
this.submit_flag = false
this.sign_flag = '0'
}
},
deep: true,
immediate: true
}
}
補(bǔ)充知識(shí)：在vue中使用watch監(jiān)測(cè)數(shù)據(jù)改變的deep:true,和immediate:true
在項(xiàng)目中，有時(shí)候檢測(cè)一個(gè)變量的值是否反升了變化。通常使用的watch或者使用低效的循環(huán)判斷。
在次vue中給我們?cè)O(shè)置了深度監(jiān)測(cè)數(shù)據(jù)繁盛變化的方法。
1.vue中提供了在watch監(jiān)聽時(shí)設(shè)置deep:true 就可以實(shí)現(xiàn)對(duì)對(duì)象的深度監(jiān)聽;
2.immediate:true,代表watch里面聲明了之后會(huì)立馬執(zhí)行handler里面的函數(shù)。
這是一個(gè)使用vuex中的一個(gè)數(shù)據(jù)，settingData.在實(shí)際中要檢測(cè)其值發(fā)生改變之后要讓一個(gè)button按鈕的disabled屬性移除。我們可以使用類似的方式，但是這樣寫的時(shí)候必須使用handler函數(shù)。
還有immediate:true,代表watch里面聲明了之后會(huì)立馬執(zhí)行handler里面的函數(shù)。執(zhí)行相應(yīng)的邏輯。
如果不設(shè)置這些屬性可以使用循環(huán)的方式。
1.若是檢測(cè)的是對(duì)象，使用循環(huán)的時(shí)候可以將其轉(zhuǎn)換成數(shù)組。（簡(jiǎn)單的對(duì)象處理）
1.使用Object.keys(obj)將其對(duì)象中的key拿出來放進(jìn)一個(gè)數(shù)組中
a.for...in...
b.[].slice.call(object)
2.然后使用循環(huán)將對(duì)相應(yīng)的值存儲(chǔ)在另一個(gè)數(shù)組中。
3.然后根據(jù)業(yè)務(wù)邏輯處理相應(yīng)的數(shù)組
2.使用es6語法糖的方式
1.數(shù)組轉(zhuǎn)對(duì)象
2.對(duì)象轉(zhuǎn)數(shù)組
Array.from(object)
復(fù)雜的問題總有簡(jiǎn)單的思路，遇到問題先思考出路然后寫代碼。
以上這篇vue2.0 watch里面的 deep和immediate用法說明就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Vue.js的指令是以v-開頭的，它們作用于HTML元素，指令提供了一些特殊的特性。這篇文章主要介紹了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相關(guān)知識(shí),需要的朋友可以參考下2018-10-10
Vue項(xiàng)目中封裝組件的簡(jiǎn)單步驟記錄
眾所周知組件(component)是vue.js最強(qiáng)大的功能之一,它可以實(shí)現(xiàn)功能的復(fù)用,以及對(duì)其他邏輯的解耦,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中封裝組件的相關(guān)資料,需要的朋友可以參考下2021-09-09
對(duì)Vue beforeRouteEnter 的next執(zhí)行時(shí)機(jī)詳解
今天小編就為大家分享一篇對(duì)Vue beforeRouteEnter 的next執(zhí)行時(shí)機(jī)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
diff算法的本質(zhì)是找出兩個(gè)對(duì)象之間的差異,目的是盡可能復(fù)用節(jié)點(diǎn)。,下面這篇文章主要給大家介紹了關(guān)于Vue中diff算法的相關(guān)資料,需要的朋友可以參考下2021-09-09
淺談vue2 單頁面如何設(shè)置網(wǎng)頁title
這篇文章主要介紹了淺談vue2 單頁面如何設(shè)置網(wǎng)頁title,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
Vue使用正則校驗(yàn)文本框?yàn)檎麛?shù)
這篇文章主要介紹了Vue使用正則校驗(yàn)文本框?yàn)檎麛?shù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
解決echarts 一條柱狀圖顯示兩個(gè)值,類似進(jìn)度條的問題
這篇文章主要介紹了解決echarts 一條柱狀圖顯示兩個(gè)值,類似進(jìn)度條的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
更強(qiáng)大的vue ssr實(shí)現(xiàn)預(yù)取數(shù)據(jù)的方式
這篇文章主要介紹了更強(qiáng)大的 vue ssr 預(yù)取數(shù)據(jù)的方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Vue3使用Echarts導(dǎo)致tooltip失效問題及解決方法
Vue3 使用 proxy 對(duì)象代理,而 echarts 則使用了大量的全等（===）, 對(duì)比失敗從而導(dǎo)致了bug,這篇文章主要介紹了Vue3使用Echarts導(dǎo)致tooltip失效問題及解決方法,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue修改滾動(dòng)條樣式,首先要知道，修改滾動(dòng)條樣式，利用偽元素-webkit-scrollbar。下面來看看文章內(nèi)容的具體實(shí)現(xiàn)吧2021-11-11