<tbody id="5vw1z"></tbody>
<rp id="5vw1z"></rp>
  •  

    理解Vue中的$nextTick()

    有一個div,默認用了v-if隱藏,點擊按鈕之后,改變v-if的值讓他顯示出來,并且取到div中的值:

    <div id=app>
      <div id="div" v-if="showDiv">我是顯示文本</div>
      <button @click="showAndGetText">獲取內容</button >
    </div>
    <script>
    var app = new Vue({
      el: '#app',
      data () {
        return {
          showDiv : false
        },
        methods: {
          showAndGetText () {
            this.showDiv  = true
            let text = document.getElementById('div').innerHTML
            console.log(text)
          }
        }
      }
    })
    </script>
    

    這段代碼并不難理解,但是控制臺回拋出一個'innerHTML' of null的錯誤,因為此時頁面并未完成渲染,它并沒有獲取到div元素,這里涉及到一個Vue的重要概念:異步更新隊列。

    Vue在觀察到數據變化時并不是直接更新DOM,而是開啟一個隊列,并緩沖同一事件循環中發生的所有數據改變。

    在緩沖時會去除重復的數據,這樣避免了不必要的計算和DOM操作。然后,在下一個時間循環Tick中,Vue刷新隊列并執行已去重的工作。

    所以,如果你用一個for循環來動態改變數據100次,其實它只會應用最后一次改變,如果沒有這種機制,DOM就要重繪100次,這是我們不愿意看到的。

    知道了Vue異步更新DOM原理之后,上面的現象就不難理解了,事實上在this.showDiv = true時,div仍然是沒有被創建出來的,下面的

    let text =document.getElementById('div').innerHTML 
    console.log(text)
    

    此時,讀取的仍然是這一次事件循環的DOM,而實際上在這一次事件循環中,DOM并沒有更新,所以是讀取不到的。

    我們需要等下一個Vue事件循環,DOM更新完成后再讀取,就可以讀取到。

    那么這時就是$nextTick閃亮登場的時候:

    <div id=app>
      <div id="div" v-if="showDiv">我是顯示文本</div>
      <button @click="showAndGetText">獲取內容</button >
    </div>
    <script>
    var app = new Vue({
      el: '#app',
      data () {
        return {
          showDiv : false
        },
        methods: {
          showAndGetText () {
            this.showDiv  = true
            this.$nextTick(function () {
         	   let text = document.getElementById('div').innerHTML
        	   console.log(text)
            })
          }
        }
      }
    })
    </script>
    

    這樣就取到我們想要的文本數據了。

    理論上,我們不應主動去操作DOM,因為Vue核心思想是:數據驅動DOM,但在很多業務里,我們避免不了會操做某些DOM元素,這時我們就需要用到$nextTick。

    Vue.js 通常鼓勵開發人員沿著“數據驅動”的方式思考,避免直接接觸 DOM。

    this.$nextTick()官方介紹: 將回調延遲到下次 DOM 更新循環之后執行。 在修改數據之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣,不同的是:回調的 this 自動綁定到調用它的實例上。

    「點點贊賞,手留余香」

    0

    給作者打賞,鼓勵TA抓緊創作!

    微信微信 支付寶支付寶

    還沒有人贊賞,快來當第一個贊賞的人吧!

    聲明:
    1. 本站所有文章教程及資源素材均來源于網絡與用戶分享或為本站原創,僅限用于學習和研究。
    2. 如果內容損害你的權益請聯系客服QQ:1642748312給予處理。
    碼云筆記 » 理解Vue中的$nextTick()

    發表回復

    IT互聯網行業相關廣告投放 更專業 更精準

    立即查看 聯系我們
    亚洲 自拍 另类小说综合图区