溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue是非常流行的框架，他結合了angular和react的優點，從而形成了一個輕量級的易上手的具有雙向數據綁定特性的mvvm框架。本人比較喜歡用之。在我們用vue時，我們經常用到一個方法是this.$nextTick，相信你也用過。我常用的場景是在進行獲取數據后，需要對新視圖進行下一步操作或者其他操作時，發現獲取不到dom。因為賦值操作只完成了數據模型的改變并沒有完成視圖更新。在這個時候我們需要用到本章介紹的函數。
雖然 Vue.js 通常鼓勵開發人員沿著“數據驅動”的方式思考，避免直接接觸 DOM，但是有時我們確實要這么做。比如你在Vue生命周期的created()/mounted()鉤子函數進行的DOM操作一定要放在Vue.nextTick()的回調函數中。原因是什么呢，原因是在created()/mounted()鉤子函數執行的時候DOM 其實并未進行任何渲染，而此時進行DOM操作無異于徒勞，所以此處一定要將DOM操作的js代碼放進Vue.nextTick()的回調函數中。
為什么要用nextTick?
請看如下一段代碼
new Vue({
el: '#app',
data: {
list: []
},
mounted: function () {
this.get()
},
methods: {
get: function () {
this.$http.get('/api/article').then(function (res) {
this.list = res.data.data.list
// ref list 引用了ul元素，我想把第一個li顏色變為紅色
this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
})
},
}
})
我在獲取到數據后賦值給數據模型中list屬性，然后我想引用ul元素找到第一個li把它的顏色變為紅色，但是事實上，這個要報錯了，我們知道，在執行這句話時，ul下面并沒有li，也就是說剛剛進行的賦值操作，當前并沒有引起視圖層的更新。因此，在這樣的情況下，vue給我們提供了$nextTick方法，如果我們想對未來更新后的視圖進行操作，我們只需要把要執行的函數傳遞給this.$nextTick方法，vue就會給我們做這個工作。
new Vue({
el: '#app',
data: {
list: []
},
mounted: function () {
this.$nextTick(() => {
this.get()
})
},
methods: {
get: function () {
this.$http.get('/api/article').then(function (res) {
this.list = res.data.data.list
// ref list 引用了ul元素，我想把第一個li顏色變為紅色
this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
})
},
}
})
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對億速云的支持。如果你想了解更多相關內容請查看下面相關鏈接
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
