Vue中this.$nextTick()的理解與使用方法
this.$nextTick()原理:
- Vue 實現(xiàn)響應式并不是數(shù)據(jù)發(fā)生變化之后 DOM 立即變化,而是按一定的策略進行 DOM 的更新。
- Vue 在修改數(shù)據(jù)后,視圖不會立刻更新,而是等同一事件循環(huán)中的所有數(shù)據(jù)變化完成之后,再統(tǒng)一進行視圖更新。
- 首先修改數(shù)據(jù),這是同步任務。同一事件循環(huán)的所有的同步任務都在主線程上執(zhí)行,形成一個執(zhí)行棧,此時還未涉及 DOM 。
- 然后Vue 開啟一個異步隊列,并緩沖在此事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個 watcher 被多次觸發(fā),只會被推入到隊列中一次。
1.Vue 實現(xiàn)響應式并不是數(shù)據(jù)發(fā)生變化之后 DOM 立即變化,而是按一定的策略進行 DOM 的更新。
2.Vue官網(wǎng)
nextTick 是在下次 DOM 更新循環(huán)結束之后執(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>
打開控制臺:
可以看到 當我點擊按鈕后,msg數(shù)據(jù)會響應式的進行更新,但受msg影響的dom元素的文本值沒有更新
使用nextTick()改進
<!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>
打開控制臺:
可以看到 當我點擊按鈕后,msg數(shù)據(jù)會響應式的進行更新,但受msg影響的dom元素的文本值也更新 了
案例2:獲取動態(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>
打開控制臺
可以看到當我點擊按鈕后,通過isShow的v-if的元素成功渲染出來,但是在函數(shù)里無法獲取 通過isShow來決定渲染的dom元素
使用nextTick()改進
<!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)的dom元素成功獲取
3.等價轉(zhuǎn)換,如果this.$nextTick不起作用時嘗試用延時器
this.$nextTick(() => { dosomething })
相當于
setTimeout(()=>{ dosomething },0)
4.this.$nextTick的應用場景
nextTick()的回調(diào)函數(shù)中。created()中使用的方法時,dom還沒有渲染,如果此時在該鉤子函數(shù)中進行dom賦值數(shù)據(jù)(或者其它dom操作)時無異于徒勞,所以,此時this.$nextTick()就會被大量使用,而與created()對應的是mounted()的鉤子函數(shù)則是在dom完全渲染后才開始渲染數(shù)據(jù),所以在mounted()中操作dom基本不會存在渲染問題。
5.總結
1.nextTick 是在下次 DOM 更新循環(huán)結束之后執(zhí)行延遲回調(diào),在修改數(shù)據(jù)之后立即使用 $nextTick,則可以在回調(diào)中獲取更新后的 DOM
2.我的理解就是nextTick方法相當于當頁面渲染結束的使用再調(diào)用nextTick方法,nextTick方法能獲取頁面最新的dom元素
到此這篇關于Vue中this.$nextTick()的理解與使用的文章就介紹到這了,更多相關Vue this.$nextTick()使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
詳解從react轉(zhuǎn)職到vue開發(fā)的項目準備
這篇文章主要介紹了詳解從react轉(zhuǎn)職到vue開發(fā)的項目準備,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01vue3?Error:Unknown?variable?dynamic?import:?../views/的解
這篇文章主要給大家介紹了關于vue3?Error:Unknown?variable?dynamic?import:?../views/的解決方案,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07vue跳轉(zhuǎn)頁面打開新窗口,并攜帶與接收參數(shù)方式
這篇文章主要介紹了vue跳轉(zhuǎn)頁面打開新窗口,并攜帶與接收參數(shù)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04Vue.js項目實戰(zhàn)之多語種網(wǎng)站的功能實現(xiàn)(租車)
這篇文章主要介紹了Vue.js項目實戰(zhàn)之多語種網(wǎng)站(租車)的功能實現(xiàn) ,需要的朋友可以參考下2019-08-08vue使用echarts如何實現(xiàn)雙柱狀圖和雙y軸的柱狀圖
這篇文章主要介紹了vue使用echarts如何實現(xiàn)雙柱狀圖和雙y軸的柱狀圖問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10vue項目如何引入element?ui、iview和echarts
這篇文章主要介紹了vue項目如何引入element?ui、iview和echarts,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09vue實現(xiàn)的上傳圖片到數(shù)據(jù)庫并顯示到頁面功能示例
這篇文章主要介紹了vue實現(xiàn)的上傳圖片到數(shù)據(jù)庫并顯示到頁面功能,結合實例形式分析了基于vue.js的數(shù)據(jù)庫操作及頁面圖片顯示相關操作技巧,需要的朋友可以參考下2018-03-03