this.$nextTick()方法的使用

<div id="app">
      <h1 id="myh">{{msg}}</h1>
      <button @click="change">點擊</button>
    </div>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello'
        },
        methods: {
          change() {

            this.msg = 'itcast'
            // console.log(document.getElementById('myh').innerText); // 如果直接這樣打印，打印出來的結果不是我們想要的itcast，而是hello，因為this.msg = ‘itcast’ 它是異步的
            this.$nextTick(() => {
              console.log(document.getElementById('myh').innerText)
            })
          }
        }
      })
    </script>

　　

作用是：等你頁面dom中的數據渲染完之后，再執行回調函數中的方法。

vue中數據和dom渲染由於是異步的

this.$nextTick()方法主要是用在隨數據改變而改變的dom應用場景中，vue中數據和dom渲染由於是異步的，所以，要讓dom結構隨數據改變這樣的操作都應該放進this.$nextTick()的回調函數中。created()中使用的方法時，dom還沒有渲染，如果此時在該鈎子函數中進行dom賦值數據（或者其它dom操作）時無異於徒勞，所以，此時this.$nextTick()就會被大量使用，而與created()對應的是mounted()的鈎子函數則是在dom完全渲染后才開始渲染數據，所以在mounted()中操作dom基本不會存在渲染問題。

 

 

 

轉：https://www.cnblogs.com/mushitianya/p/10510912.html

轉：https://blog.csdn.net/gaoxin666/article/details/96143571