Vue中this.$nextTick()的理解與使用方法
this.$nextTick()原理：
- Vue 實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化之后 DOM 立即變化，而是按一定的策略進(jìn)行 DOM 的更新。
- Vue 在修改數(shù)據(jù)后，視圖不會(huì)立刻更新，而是等同一事件循環(huán)中的所有數(shù)據(jù)變化完成之后，再統(tǒng)一進(jìn)行視圖更新。
- 首先修改數(shù)據(jù)，這是同步任務(wù)。同一事件循環(huán)的所有的同步任務(wù)都在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧，此時(shí)還未涉及 DOM 。
- 然后Vue 開啟一個(gè)異步隊(duì)列，并緩沖在此事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。
1.Vue 實(shí)現(xiàn)響應(yīng)式并不是數(shù)據(jù)發(fā)生變化之后 DOM 立即變化，而是按一定的策略進(jìn)行 DOM 的更新。
2.Vue官網(wǎng)
nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后立即使用 $nextTick，則可以在回調(diào)中獲取更新后的 DOM
new Vue({
// ...
methods: {
// ...
example: function () {
// modify data
this.message = 'changed'
// DOM is not updated yet
this.$nextTick(function () {
// DOM is now updated
// `this` is bound to the current instance
this.doSomethingElse()
})
}
}案例1：修改文本的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<span id="btn">{{msg}}</span>
<button @click="updateText">修改文本的值</button>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello world!'
},
methods: {
updateText() {
this.msg = '修改文本的值'
console.log(this.msg)
console.log(document.getElementById('btn').innerHTML);
}
}
});
</script>
</html>打開控制臺(tái)：
可以看到 當(dāng)我點(diǎn)擊按鈕后，msg數(shù)據(jù)會(huì)響應(yīng)式的進(jìn)行更新,但受msg影響的dom元素的文本值沒有更新
使用nextTick()改進(jìn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<span id="btn">{{msg}}</span>
<button @click="updateText">修改文本的值</button>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello world!'
},
methods: {
updateText() {
this.msg = '修改文本的值'
console.log(this.msg)
this.$nextTick(() => {
console.log(document.getElementById('btn').innerHTML);
});
}
}
});
</script>
</html>打開控制臺(tái)：
可以看到 當(dāng)我點(diǎn)擊按鈕后，msg數(shù)據(jù)會(huì)響應(yīng)式的進(jìn)行更新,但受msg影響的dom元素的文本值也更新 了
案例2：獲取動(dòng)態(tài)渲染的dom元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<span id="btn" v-if="isShow">hello world!</span>
<button @click="show">顯示</button>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
isShow: false
},
methods: {
show() {
this.isShow = true
console.log(document.getElementById('btn'))
}
}
});
</script>
</html>打開控制臺(tái)
可以看到當(dāng)我點(diǎn)擊按鈕后，通過isShow的v-if的元素成功渲染出來，但是在函數(shù)里無法獲取 通過isShow來決定渲染的dom元素
使用nextTick()改進(jìn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<span id="btn" v-if="isShow">hello world!</span>
<button @click="show">顯示</button>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
isShow: false
},
methods: {
show() {
this.isShow = true
this.$nextTick(() => {
console.log(document.getElementById('btn'))
})
}
}
});
</script>
</html>控制臺(tái)運(yùn)行：
可以看到動(dòng)態(tài)的dom元素成功獲取
3.等價(jià)轉(zhuǎn)換，如果this.$nextTick不起作用時(shí)嘗試用延時(shí)器
this.$nextTick(() => {
dosomething
})相當(dāng)于
setTimeout(()=>{
dosomething
},0)4.this.$nextTick的應(yīng)用場(chǎng)景
nextTick()的回調(diào)函數(shù)中。created()中使用的方法時(shí)，dom還沒有渲染，如果此時(shí)在該鉤子函數(shù)中進(jìn)行dom賦值數(shù)據(jù)（或者其它dom操作）時(shí)無異于徒勞，所以，此時(shí)this.$nextTick()就會(huì)被大量使用，而與created()對(duì)應(yīng)的是mounted()的鉤子函數(shù)則是在dom完全渲染后才開始渲染數(shù)據(jù)，所以在mounted()中操作dom基本不會(huì)存在渲染問題。
5.總結(jié)
1.nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)，在修改數(shù)據(jù)之后立即使用 $nextTick，則可以在回調(diào)中獲取更新后的 DOM
2.我的理解就是nextTick方法相當(dāng)于當(dāng)頁面渲染結(jié)束的使用再調(diào)用nextTick方法，nextTick方法能獲取頁面最新的dom元素
到此這篇關(guān)于Vue中this.$nextTick()的理解與使用的文章就介紹到這了,更多相關(guān)Vue this.$nextTick()使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue實(shí)現(xiàn)的上傳圖片到數(shù)據(jù)庫(kù)并顯示到頁面功能示例
這篇文章主要介紹了vue實(shí)現(xiàn)的上傳圖片到數(shù)據(jù)庫(kù)并顯示到頁面功能,結(jié)合實(shí)例形式分析了基于vue.js的數(shù)據(jù)庫(kù)操作及頁面圖片顯示相關(guān)操作技巧,需要的朋友可以參考下2018-03-03
解決vue項(xiàng)目運(yùn)行提示W(wǎng)arnings while compiling.警告的問題
這篇文章主要介紹了解決vue項(xiàng)目運(yùn)行提示W(wǎng)arnings while compiling.警告的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
AntV+Vue實(shí)現(xiàn)導(dǎo)出圖片功能
AntV?組織圖操作完畢以后，需要點(diǎn)擊按鈕將畫布以圖片的形式導(dǎo)出，這篇文章主要介紹了AntV結(jié)合Vue實(shí)現(xiàn)導(dǎo)出圖片功能,需要的朋友可以參考下2023-01-01
前端在el-dialog中嵌套多個(gè)el-dialog代碼實(shí)現(xiàn)
最近使用vue+elementUI做項(xiàng)目,使用過程中很多地方會(huì)用到dialog這個(gè)組件,有好幾個(gè)地方用到了dialog的嵌套,下面這篇文章主要給大家介紹了關(guān)于前端在el-dialog中嵌套多個(gè)el-dialog代碼實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2024-01-01
vue3+elementPlus項(xiàng)目支持設(shè)置默認(rèn)附件方式
這篇文章主要介紹了vue3+elementPlus項(xiàng)目支持設(shè)置默認(rèn)附件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
使用reactive導(dǎo)致數(shù)據(jù)失去響應(yīng)式的原因和解決方案
在 Vue 的響應(yīng)式系統(tǒng)中,reactive 對(duì)象是一個(gè)深度代理,它會(huì)追蹤對(duì)象屬性的變更,但如果你將整個(gè)對(duì)象重新賦值,那么 Vue 無法繼續(xù)追蹤新的對(duì)象,本文給大家介紹了使用reactive導(dǎo)致數(shù)據(jù)失去響應(yīng)式的原因和解決方案,需要的朋友可以參考下2024-09-09
這篇文章主要給大家介紹了關(guān)于Vuex中Getter的基本使用教程,getter相當(dāng)于Vuex中的計(jì)算屬性 對(duì) state 做處理再返回,本文通過示例代碼將Getter介紹的非常詳細(xì),需要的朋友可以參考下2021-07-07
vue3容器布局和導(dǎo)航路由實(shí)現(xiàn)示例
這篇文章主要為大家介紹了vue3容器布局和導(dǎo)航路由實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
vue2.0 + ele的循環(huán)表單及驗(yàn)證字段方法
今天小編就為大家分享一篇vue2.0 + ele的循環(huán)表單及驗(yàn)證字段方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue?LogicFlow更多配置選項(xiàng)示例詳解
這篇文章主要為大家介紹了vue?LogicFlow更多配置選項(xiàng)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01