Vue--Vue.nextTick()的使用

時間 2019-11-07

標籤 vue vue.nexttick nexttick 使用简体版

原文原文鏈接

　　　Vue.nextTick()是比較經常使用到的APIhtml

　　　Vue官網對它的解釋是：在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的 DOM。vue

　　　首先要明白Vue的響應式原理（官網有詳細的解釋）：在data選項裏全部屬性都會被watch監控，當修改了data的某一個值，並不會當即反應到視圖中。vue將你對data的更改放到watcher的一個對列中（異步），只有在當前任務空閒時纔會去執行watcher隊列任務。這就有一個延遲時間了（咱們看起來是直接反映到視圖的，其實並非！！，只是瀏覽器引擎在很短的時間內就比較完了數據的先後差別並更新到視圖裏）。官網有個很清晰的例子：瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/vue.js"></script>
    
</head>
<body>
    <div id="app">
        <example></example>
    </div>
</body>
<script>
        Vue.component('example', {
              template: '<span>{{ message }}</span>',
              data: function () {
                return {
                      message: '沒有更新'
                }
              },
          mounted () {
              this.updateMessage();
          },
        methods: {
            updateMessage: function () {
              this.message = '更新完成'
              console.log(this.$el.textContent) // => '沒有更新'
              this.$nextTick(function () {
                console.log(this.$el.textContent) // => '更新完成'
              })
            }
          }
        })
        new Vue({
            el:'#app'
        })    
    </script>
</html>

　　在視圖上最終顯示更新完成，但在控制檯console.log就不同了app

　　在updateMessage函數裏改變了msg的值（異步），下一步打印 msg （同步）能夠看出打印的是‘沒有更新’ 【注意：改變data的某個值，再當即引用，是常常犯的一個錯誤】，爲了規避這個錯誤，就有了nextTick( ) ,如今再結合官網的那兩句話，是否是清晰不少呢？視圖更新完了就調用nextTick(),此時數據也就更新完了並且插到視圖。異步

　　那什麼場景須要使用到nextTick( ) 呢？函數

　　　　　　待續。。。。。。。this

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2017-06-28 00：31spa