項(xiàng)目中哪些場景會用到nextTick方法呢？
1、在Vue生命周期的created()鉤子函數(shù)進(jìn)行的DOM操作一定要放在Vue.nextTick()的回調(diào)函數(shù)中
在created()鉤子函數(shù)執(zhí)行的時(shí)候DOM 其實(shí)并未進(jìn)行任何渲染，而此時(shí)進(jìn)行DOM操作無異于徒勞，所以此處一定要將DOM操作的js代碼放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中。與之對應(yīng)的就是mounted()鉤子函數(shù)，因?yàn)樵撱^子函數(shù)執(zhí)行時(shí)所有的DOM掛載和渲染都已完成，此時(shí)在該鉤子函數(shù)中進(jìn)行任何DOM操作都不會有問題 。
2、在數(shù)據(jù)變化后要執(zhí)行的某個操作，而這個操作需要使用隨數(shù)據(jù)改變而改變的DOM結(jié)構(gòu)的時(shí)候，這個操作都應(yīng)該放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中。
比如在項(xiàng)目中我們有一段這樣子的代碼：
<RadioGroup v-model="launcharea" @on-change="changeArea">
? ? ? ? ? ? ? ? <Radio label="ALL">
? ? ? ? ? ? ? ? <span>不限</span>
? ? ? ? ? ? ? ? </Radio>
? ? ? ? ? ? ? ? <Radio label="somearea">
? ? ? ? ? ? ? ? <span>選擇地域</span>
? ? ? ? ? ? ? ? </Radio>
</RadioGroup>
需求要求在滿足if條件下，點(diǎn)擊選擇地域時(shí)，radioBtn還在不限那里選中著，剛開始寫的代碼是：
if (this.blackListInfo.advertiserLabel.length === 0) {
? ? ? ? this.$Message.error('請至少選擇一個廣告主類型');
? ? ? ? ? this.launcharea = 'ALL'；
?}
這個時(shí)候運(yùn)行代碼發(fā)現(xiàn)，滿足if條件時(shí)，錯誤提示彈出來了，但是單選按鈕沒有在不限那里，還是在選擇地域那里，但是我們明明把this.launcharea = 'ALL'了，根據(jù)雙向數(shù)據(jù)綁定，此刻單選按鈕應(yīng)該在不限，為什么此刻雙向數(shù)據(jù)綁定沒起作用呢？
我們點(diǎn)擊選擇地域時(shí)，vue內(nèi)部get、set方法執(zhí)行了一次，this.launcharea = 'somearea'，同時(shí)單選按鈕選中選擇地域，代碼中this.launcharea = 'ALL'，數(shù)據(jù)更新會出發(fā)dom更新,vue內(nèi)部get、set方法又執(zhí)行了一次，這兩次是異步的，為了確保this.launcharea = 'ALL'的數(shù)據(jù)改變引起的dom改變發(fā)生在最后，需要將其放在Vue.nextTick()的回調(diào)函數(shù)中。所以將項(xiàng)目中代碼應(yīng)該為如下：
if (this.blackListInfo.advertiserLabel.length === 0) {
? ? ? ? this.$Message.error('請至少選擇一個廣告主類型');
? ? ? ? this.$nextTick(() => {
? ? ? ? ? this.launcharea = 'ALL';
? ? ? ? });
?}
此時(shí)，在我們滿足if條件下點(diǎn)擊選擇地域，先彈出提示消息，也看到單選按鈕是選中不限的，而不是選擇地域。
