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ù)。

成都創(chuàng)新互聯(lián)專注于廣河網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供廣河營銷型網(wǎng)站建設(shè)，廣河網(wǎng)站制作、廣河網(wǎng)頁設(shè)計、廣河網(wǎng)站官網(wǎng)定制、小程序設(shè)計服務(wù)，打造廣河網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供廣河網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

雖然 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í)價值，謝謝大家對創(chuàng)新互聯(lián)的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接

網(wǎng)頁標(biāo)題：vue中$nextTick的用法講解
分享地址：http://muchs.cn/article48/pjjeep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、虛擬主機、外貿(mào)建站、、搜索引擎優(yōu)化、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)