vue中$nextTick的用法講解
vue是非常流行的框架，他結(jié)合了angular和react的優(yōu)點，從而形成了一個輕量級的易上手的具有雙向數(shù)據(jù)綁定特性的mvvm框架。本人比較喜歡用之。在我們用vue時，我們經(jīng)常用到一個方法是this.$nextTick，相信你也用過。我常用的場景是在進(jìn)行獲取數(shù)據(jù)后，需要對新視圖進(jìn)行下一步操作或者其他操作時，發(fā)現(xiàn)獲取不到dom。因為賦值操作只完成了數(shù)據(jù)模型的改變并沒有完成視圖更新。在這個時候我們需要用到本章介紹的函數(shù)。
雖然 Vue.js 通常鼓勵開發(fā)人員沿著“數(shù)據(jù)驅(qū)動”的方式思考，避免直接接觸 DOM，但是有時我們確實要這么做。比如你在Vue生命周期的created()/mounted()鉤子函數(shù)進(jìn)行的DOM操作一定要放在Vue.nextTick()的回調(diào)函數(shù)中。原因是什么呢，原因是在created()/mounted()鉤子函數(shù)執(zhí)行的時候DOM 其實并未進(jìn)行任何渲染，而此時進(jìn)行DOM操作無異于徒勞，所以此處一定要將DOM操作的js代碼放進(jìn)Vue.nextTick()的回調(diào)函數(shù)中。
為什么要用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顏色變?yōu)榧t色
this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
})
},
}
})
我在獲取到數(shù)據(jù)后賦值給數(shù)據(jù)模型中l(wèi)ist屬性，然后我想引用ul元素找到第一個li把它的顏色變?yōu)榧t色，但是事實上，這個要報錯了，我們知道，在執(zhí)行這句話時，ul下面并沒有l(wèi)i，也就是說剛剛進(jìn)行的賦值操作，當(dāng)前并沒有引起視圖層的更新。因此，在這樣的情況下，vue給我們提供了$nextTick方法，如果我們想對未來更新后的視圖進(jìn)行操作，我們只需要把要執(zhí)行的函數(shù)傳遞給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顏色變?yōu)榧t色
this.$refs.list.getElementsByTagName('li')[0].style.color = 'red'
})
},
}
})
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接
相關(guān)文章
這篇文章主要介紹了Vue字符串中如何添加多個空格問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了Vue-Router源碼分析路由實現(xiàn)原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了基于vue的短信驗證碼倒計時demo，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要給大家介紹了關(guān)于vue3前端獲取文件的絕對路徑問題解決的相關(guān)資料,文中通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue中使用h5 Plus的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue中使用過濾器filters的this為undefined的問題
這篇文章主要介紹了vue中使用過濾器filters的this為undefined的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
Vue3項目打包后部署到服務(wù)器 請求不到后臺接口解決方法
在本篇文章里小編給大家整理了關(guān)于Vue3項目打包后部署到服務(wù)器 請求不到后臺接口解決方法，有需要的朋友們可以參考下。2020-02-02
這篇文章主要給大家介紹了關(guān)于如何重置vue打印變量顯示方式的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起看看吧。2017-12-12
本文章主要來介紹一下第一個階段，也就是前端校驗的驗證碼的實現(xiàn)，下面來介紹一下拖動驗證碼的具體實現(xiàn)。這篇文章主要介紹了利用 Vue 實現(xiàn)滑動驗證碼,需要的朋友可以參考下2019-06-06
ElementUI中el-dropdown-item點擊事件無效問題
這篇文章主要介紹了ElementUI中el-dropdown-item點擊事件無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04