讓你一看就明白的$nextTick講解
1.功能描述
今天我們要實(shí)現(xiàn)這個(gè)一個(gè)小功能；頁面渲染完成后展示一個(gè)div元素；當(dāng)點(diǎn)擊這個(gè)div元素后；div元素消失；出現(xiàn)一個(gè)input元素；并且input元素聚焦，想必大家覺得簡單，我們一起來看看~
創(chuàng)建一個(gè)組件，組件名稱NextTick.vue；
在頁面中引入注冊(cè)
2.父組件
<template>
<div>
<next-tick></next-tick>
</div>
</template>
<script lang="ts">
import NextTick from "../components/NextTick.vue"
export default {
name:"About",
components:{
NextTick
},
}
</script>
3.子組件NextTick.vue
<template>
<div>
<div>我是組件</div>
<div v-if="flag" class="sun" @click="handerClick">顯示input</div>
<input v-else ref="inputRef" class="yuelaing"/>
</div>
</template>
<script>
export default {
data(){
return{
flag:true,
}
},
methods: {
handerClick(){
this.flag=false;
this.$refs.inputRef.focus();
},
},
}
</script>
4為什么是undefined
this.flag=false; this.$refs.inputRef.focus();
當(dāng)執(zhí)行頁面操作的時(shí)候，this.$refs.inputRef.focus();
是需要消耗時(shí)間的(還沒有還得及刷新；還是舊的頁面)
此時(shí)還沒有獲取到dom元素。
所以會(huì)報(bào)錯(cuò)。
解決方式1:
因此只要讓頁面能夠獲取元素就行；使用setTimeout
setTimeout(()=>{
this.$refs.inputRef.focus();
},100)
這樣來處理這個(gè)問題，是可以的；
但是顯得非常的不專業(yè)；
解決方式2:
//當(dāng)組件根據(jù)最新的data數(shù)據(jù)，重新在視圖上完成渲染后，在執(zhí)行里面的函調(diào)函數(shù)
this.$nextTick(()=>{
this.$refs.inputRef.focus();
})
5.將v-if更改為v-show可以獲取焦點(diǎn)嗎？
有人說：因?yàn)関-if是動(dòng)態(tài)創(chuàng)建和銷毀；在創(chuàng)建和銷毀的過程中，是需要時(shí)間的!所以才會(huì)使用v-if獲取不到元素節(jié)點(diǎn)，用v-show就可以避免。
感覺說的有點(diǎn)道理？
我們嘗試一下將v-if換成v-show
<template>
<div>
<div>我是組件</div>
<div v-show="flag" class="sun" @click="handerClick">顯示input</div>
<input v-show="!flag" ref="inputRef" class="yuelaing"/>
</div>
</template>
<script>
export default {
data(){
return{
flag:true,
}
},
methods: {
handerClick(){
this.flag=false;
console.log( this.$refs.inputRef);
this.$refs.inputRef.focus();
},
},
}
</script>
6.實(shí)際結(jié)果
我們發(fā)現(xiàn)雖然是頁面沒有報(bào)錯(cuò)，但是還沒有聚焦；改為v-show明顯也不能夠解決這個(gè)問題
之所以會(huì)出現(xiàn)這個(gè)問題,是因?yàn)樽咏M件中將this.flag=false后，立刻去執(zhí)行了下面的代碼
this.$refs.inputRef.focus();
而在執(zhí)行的時(shí)候，視圖還沒沒有來得及刷新；還是舊的頁面，此時(shí)還不能夠獲取到dom元素,因此出現(xiàn)了undefined；也就是為什么我們加上延時(shí)后就可以聚焦了；
當(dāng)組件根據(jù)最新的data數(shù)據(jù)，重新在視圖上完成渲染后，在執(zhí)行里面的函調(diào)函數(shù)
這就是$nextTick的基本用法
this.$nextTick(()=>{
this.$refs.inputRef.focus();
})
7.將組件變成頁面可以獲取焦點(diǎn)嗎？
又有人說：因?yàn)槭亲咏M件，子組件比父組件后渲染。所以沒有獲取到元素節(jié)點(diǎn)。
這也是理由....
感覺還沒有上一個(gè)小伙伴說的對(duì),為了解決疑惑。我們決定將子組件變成頁面在看看
<template>
<div>
<div>我是組件</div>
<div v-show="flag" class="sun" @click="handerClick">顯示input</div>
<input v-show="!flag" ref="inputRef" class="yuelaing"/>
</div>
</template>
<script>
export default {
data(){
return{
flag:true,
}
},
methods: {
handerClick(){
this.flag=false;
this.$refs.inputRef.focus();
},
},
}
</script>
我們發(fā)現(xiàn)仍然不可以；這就充分說明了：更新data的數(shù)據(jù)后，vue并不是實(shí)時(shí)更新的。
數(shù)據(jù)更新到顯示到頁面有時(shí)間差,我們?cè)跁r(shí)間差內(nèi)調(diào)用頁面數(shù)據(jù)，當(dāng)然獲取不到。
也就是說：Vue在更新 DOM 時(shí)是異步執(zhí)行的
8.為什么會(huì)有$nextTick
之所以會(huì)有$nextTick；因?yàn)樵趘ue中數(shù)據(jù)發(fā)生變化后；視圖上的dom并不會(huì)立刻去跟新；dom的跟新是需要時(shí)間的
下面我們通過一個(gè)小實(shí)驗(yàn)來看一下
<template>
<div>
<div ref="unique">
<h1>{{ cont }}</h1>
</div>
<div class="sun" @click="handerClick">改變值</div>
</div>
</template>
<script>
export default {
data(){
return{
cont:'我是默認(rèn)值'
}
},
methods: {
handerClick(){
this.cont='我改變了默認(rèn)值';
console.log('1==>',this.$refs.unique.innerText);
this.$nextTick(()=>{
console.log('2==>',this.$refs.unique.innerText);
})
},
},
}
</script>
我們發(fā)現(xiàn)，第一次的值和第二次的值，是不一樣的；因?yàn)橐晥D上dom的跟新是需要之間的；我們?cè)谶@個(gè)之間差內(nèi)去獲取元素值；仍然是舊值；所以第一次的值是最初的值；第二次的值才是改變后的值；
由于我們希望跟新數(shù)據(jù)后，仍然可以立刻獲取dom上的值
所以vue提供了$nextTick就可以解決這個(gè)問題
9.Vue.nextTick和this.$nextTick差別
Vue.nextTick是全局方法
this.$nextTick( [callback] ) 是實(shí)例方法。
我們都知道一個(gè)頁面可以有多個(gè)實(shí)例，也就是說this.$nextTick可以精確到某個(gè)實(shí)例上。其實(shí)本質(zhì)上兩個(gè)是一樣的。
只是一個(gè)是全局，一個(gè)是精確到某一個(gè)實(shí)例。精確度不一樣而已。
10.使用 nextTick的一個(gè)小技巧
我們都知道在生命周期mounted渲染的時(shí)候，不能百分百保證所有的子組件都能夠被渲染，因此我們可以在mounted里面使用 this.$nextTick，這樣就能保證所有的子組件都能被渲染到。
mounted鉤子在服務(wù)器端渲染期間不被調(diào)用。
mounted: function () {
this.$nextTick(function () {
//在數(shù)據(jù)發(fā)生變化，
//重新在視圖上完成渲染后，在執(zhí)行里面的方法
//這一句話等同與：
//將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行
//等同于:在修改數(shù)據(jù)之后,然后等待 DOM 更新后在執(zhí)行
})
}
總結(jié)
到此這篇關(guān)于$nextTick的文章就介紹到這了,更多相關(guān)$nextTick講解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue+Element UI 樹形控件整合下拉功能菜單（tree + dropdown +input）
這篇文章主要介紹了Vue+Element UI 樹形控件整合下拉功能菜單（tree + dropdown +input）的方法，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-08-08
這篇文章主要介紹了VueRouter導(dǎo)航守衛(wèi)的詳細(xì)用法以及分類介紹，有興趣的朋友學(xué)習(xí)參考下吧。2017-12-12
在VUE中使用lodash的debounce和throttle操作
這篇文章主要介紹了在VUE中使用lodash的debounce和throttle操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue-i18n的9以上版本中@被用作特殊字符處理,直接用會(huì)報(bào)錯(cuò)問題
這篇文章主要介紹了vue-i18n的9以上版本中@被用作特殊字符處理,直接用會(huì)報(bào)錯(cuò)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了詳解服務(wù)端預(yù)渲染之Nuxt（介紹篇）,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04
VUE 項(xiàng)目在IE11白屏報(bào)錯(cuò) SCRIPT1002: 語法錯(cuò)誤的解決
這篇文章主要介紹了VUE 項(xiàng)目在IE11白屏報(bào)錯(cuò) SCRIPT1002: 語法錯(cuò)誤的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
vue是一種輕巧便捷的框架，那么如何進(jìn)行對(duì)于數(shù)據(jù)加載的刷新呢？以下就是我對(duì)于vue.js數(shù)據(jù)加載的一點(diǎn)想法2017-06-06
vue.js 1.x與2.0中js實(shí)時(shí)監(jiān)聽input值的變化
這篇文章主要介紹了vue.js 1.x與vue.js2.0中js實(shí)時(shí)監(jiān)聽input值的變化的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
vuecli3.0腳手架搭建及不同的打包環(huán)境配置vue.config.js的詳細(xì)過程
這篇文章主要介紹了vuecli3.0腳手架搭建及不同的打包環(huán)境配置vue.config.js的詳細(xì)過程,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了如何修改ant?design組件自帶樣式問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12