讓你一看就明白的$nextTick講解
1.功能描述
今天我們要實現(xiàn)這個一個小功能；頁面渲染完成后展示一個div元素；當點擊這個div元素后；div元素消失；出現(xiàn)一個input元素；并且input元素聚焦，想必大家覺得簡單，我們一起來看看~
創(chuàng)建一個組件，組件名稱NextTick.vue；
在頁面中引入注冊
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();
當執(zhí)行頁面操作的時候，this.$refs.inputRef.focus();
是需要消耗時間的(還沒有還得及刷新；還是舊的頁面)
此時還沒有獲取到dom元素。
所以會報錯。
解決方式1:
因此只要讓頁面能夠獲取元素就行；使用setTimeout
setTimeout(()=>{
this.$refs.inputRef.focus();
},100)
這樣來處理這個問題，是可以的；
但是顯得非常的不專業(yè)；
解決方式2:
//當組件根據(jù)最新的data數(shù)據(jù)，重新在視圖上完成渲染后，在執(zhí)行里面的函調(diào)函數(shù)
this.$nextTick(()=>{
this.$refs.inputRef.focus();
})
5.將v-if更改為v-show可以獲取焦點嗎？
有人說：因為v-if是動態(tài)創(chuàng)建和銷毀；在創(chuàng)建和銷毀的過程中，是需要時間的!所以才會使用v-if獲取不到元素節(jié)點，用v-show就可以避免。
感覺說的有點道理？
我們嘗試一下將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.實際結(jié)果
我們發(fā)現(xiàn)雖然是頁面沒有報錯，但是還沒有聚焦；改為v-show明顯也不能夠解決這個問題
之所以會出現(xiàn)這個問題,是因為子組件中將this.flag=false后，立刻去執(zhí)行了下面的代碼
this.$refs.inputRef.focus();
而在執(zhí)行的時候，視圖還沒沒有來得及刷新；還是舊的頁面，此時還不能夠獲取到dom元素,因此出現(xiàn)了undefined；也就是為什么我們加上延時后就可以聚焦了；
當組件根據(jù)最新的data數(shù)據(jù)，重新在視圖上完成渲染后，在執(zhí)行里面的函調(diào)函數(shù)
這就是$nextTick的基本用法
this.$nextTick(()=>{
this.$refs.inputRef.focus();
})
7.將組件變成頁面可以獲取焦點嗎？
又有人說：因為是子組件，子組件比父組件后渲染。所以沒有獲取到元素節(jié)點。
這也是理由....
感覺還沒有上一個小伙伴說的對,為了解決疑惑。我們決定將子組件變成頁面在看看
<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ù)據(jù)更新到顯示到頁面有時間差,我們在時間差內(nèi)調(diào)用頁面數(shù)據(jù)，當然獲取不到。
也就是說：Vue在更新 DOM 時是異步執(zhí)行的
8.為什么會有$nextTick
之所以會有$nextTick；因為在vue中數(shù)據(jù)發(fā)生變化后；視圖上的dom并不會立刻去跟新；dom的跟新是需要時間的
下面我們通過一個小實驗來看一下
<template>
<div>
<div ref="unique">
<h1>{{ cont }}</h1>
</div>
<div class="sun" @click="handerClick">改變值</div>
</div>
</template>
<script>
export default {
data(){
return{
cont:'我是默認值'
}
},
methods: {
handerClick(){
this.cont='我改變了默認值';
console.log('1==>',this.$refs.unique.innerText);
this.$nextTick(()=>{
console.log('2==>',this.$refs.unique.innerText);
})
},
},
}
</script>
我們發(fā)現(xiàn)，第一次的值和第二次的值，是不一樣的；因為視圖上dom的跟新是需要之間的；我們在這個之間差內(nèi)去獲取元素值；仍然是舊值；所以第一次的值是最初的值；第二次的值才是改變后的值；
由于我們希望跟新數(shù)據(jù)后，仍然可以立刻獲取dom上的值
所以vue提供了$nextTick就可以解決這個問題
9.Vue.nextTick和this.$nextTick差別
Vue.nextTick是全局方法
this.$nextTick( [callback] ) 是實例方法。
我們都知道一個頁面可以有多個實例，也就是說this.$nextTick可以精確到某個實例上。其實本質(zhì)上兩個是一樣的。
只是一個是全局，一個是精確到某一個實例。精確度不一樣而已。
10.使用 nextTick的一個小技巧
我們都知道在生命周期mounted渲染的時候，不能百分百保證所有的子組件都能夠被渲染，因此我們可以在mounted里面使用 this.$nextTick，這樣就能保證所有的子組件都能被渲染到。
mounted鉤子在服務器端渲染期間不被調(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
對于插槽的概念和使用,這是vue的一個難點,這需要我們靜下心來,慢慢研究,下面這篇文章主要給大家介紹了關(guān)于vue默認插槽的相關(guān)資料,需要的朋友可以參考下2021-11-11
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)h5機器人聊天測試版，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要為大家詳細介紹了vue滑動解鎖組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue響應式原理Observer、Dep、Watcher理解
這篇文章主要介紹了Vue響應式原理-理解Observer、Dep、Watcher,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
今天小編就為大家分享一篇vue在路由中驗證token是否存在的簡單實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue 項目引入echarts 添加點擊事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
本篇文章主要介紹了Vue-cli代理解決跨域問題，詳細的介紹了Vue如何設(shè)置代理，具有一定參考價值，有興趣的可以了解一下2017-09-09
前端開發(fā)中,隨著業(yè)務的增多,出于效率的考慮,我們對于組件化開發(fā)的需求也越來越迫切。下面這篇文章主要給大家介紹了關(guān)于vue.js之UI組件開發(fā)的相關(guān)資料，文中介紹的非常詳細，需要的朋友們下面來一起看看吧。2017-07-07
詳解刷新頁面vuex數(shù)據(jù)不消失和不跳轉(zhuǎn)頁面的解決
這篇文章主要介紹了詳解刷新頁面vuex數(shù)據(jù)不消失和不跳轉(zhuǎn)頁面的解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了vue3項目引入pinia報錯的簡單解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10