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)擊按鈕后,通過(guò)isShow的v-if的元素成功渲染出來(lái),但是在函數(shù)里無(wú)法獲取 通過(guò)isShow來(lái)決定渲染的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í)無(wú)異于徒勞,所以,此時(shí)this.$nextTick()就會(huì)被大量使用,而與created()對(duì)應(yīng)的是mounted()的鉤子函數(shù)則是在dom完全渲染后才開始渲染數(shù)據(jù),所以在mounted()中操作dom基本不會(huì)存在渲染問(wèn)題。
5.總結(jié)
1.nextTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào),在修改數(shù)據(jù)之后立即使用 $nextTick,則可以在回調(diào)中獲取更新后的 DOM
2.我的理解就是nextTick方法相當(dāng)于當(dāng)頁(yè)面渲染結(jié)束的使用再調(diào)用nextTick方法,nextTick方法能獲取頁(yè)面最新的dom元素
到此這篇關(guān)于Vue中this.$nextTick()的理解與使用的文章就介紹到這了,更多相關(guān)Vue this.$nextTick()使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解從react轉(zhuǎn)職到vue開發(fā)的項(xiàng)目準(zhǔn)備
這篇文章主要介紹了詳解從react轉(zhuǎn)職到vue開發(fā)的項(xiàng)目準(zhǔn)備,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01vue3?Error:Unknown?variable?dynamic?import:?../views/的解
這篇文章主要給大家介紹了關(guān)于vue3?Error:Unknown?variable?dynamic?import:?../views/的解決方案,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07vue跳轉(zhuǎn)頁(yè)面打開新窗口,并攜帶與接收參數(shù)方式
這篇文章主要介紹了vue跳轉(zhuǎn)頁(yè)面打開新窗口,并攜帶與接收參數(shù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04Vue實(shí)現(xiàn)計(jì)算器計(jì)算效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)計(jì)算器計(jì)算效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08Vue.js項(xiàng)目實(shí)戰(zhàn)之多語(yǔ)種網(wǎng)站的功能實(shí)現(xiàn)(租車)
這篇文章主要介紹了Vue.js項(xiàng)目實(shí)戰(zhàn)之多語(yǔ)種網(wǎng)站(租車)的功能實(shí)現(xiàn) ,需要的朋友可以參考下2019-08-08vue使用echarts如何實(shí)現(xiàn)雙柱狀圖和雙y軸的柱狀圖
這篇文章主要介紹了vue使用echarts如何實(shí)現(xiàn)雙柱狀圖和雙y軸的柱狀圖問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10vue項(xiàng)目如何引入element?ui、iview和echarts
這篇文章主要介紹了vue項(xiàng)目如何引入element?ui、iview和echarts,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09vue實(shí)現(xiàn)的上傳圖片到數(shù)據(jù)庫(kù)并顯示到頁(yè)面功能示例
這篇文章主要介紹了vue實(shí)現(xiàn)的上傳圖片到數(shù)據(jù)庫(kù)并顯示到頁(yè)面功能,結(jié)合實(shí)例形式分析了基于vue.js的數(shù)據(jù)庫(kù)操作及頁(yè)面圖片顯示相關(guān)操作技巧,需要的朋友可以參考下2018-03-03