首頁 > 文章 > web前端 > vue指令與$nextTick操作DOM有什麼差別?

vue指令與$nextTick操作DOM有什麼差別?

不言原創: 2018-08-02 17:46:352154瀏覽

這篇文章給大家介紹的文章內容是關於vue指令與$nextTick操作DOM有什麼區別?有很好的參考價值，希望可以幫助到有需要的朋友。

非同步更新佇列

可能你還沒注意到，Vue 非同步執行 DOM 更新。只要觀察到資料變化，Vue 將開啟一個佇列，並緩衝在同一事件循環中發生的所有資料變更。如果同一個 watcher 被多次觸發，只會被推入到佇列中一次。這種在緩衝時去除重複資料對於避免不必要的計算和 DOM 操作上非常重要。然後，在下一個的事件循環「tick」中，Vue 刷新佇列並執行實際 (已去重的) 工作。 Vue 在內部嘗試對非同步佇列使用原生的 Promise.then 和 MessageChannel，如果執行環境不支持，會採用 setTimeout(fn, 0) 代替。

例如，當你設定 vm.someData = 'new value' ，元件不會立即重新渲染。當刷新佇列時，元件會在事件循環佇列清空時的下一個「tick」更新。多數情況我們不需要關心這個過程，但是如果你想在 DOM 狀態更新後做點什麼，這可能會有些棘手。雖然 Vue.js 通常鼓勵開發人員沿著「資料驅動」的方式思考，避免直接接觸 DOM，但有時我們確實要這麼做。為了在資料變更之後等待 Vue 完成更新 DOM ，可以在資料變更之後立即使用 Vue.nextTick(callback) 。這樣回呼函數在 DOM 更新完成後就會呼叫。例如：

<p id="example">{{message}}</p>
var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

在元件內使用vm.$nextTick() 實例方法特別方便，因為它不需要全域Vue ，而且回呼函數中的this 將自動綁定到目前的Vue 實例上：

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '没有更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '更新完成'
      console.log(this.$el.textContent) // => '没有更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '更新完成'
      })
    }
  }
})

vue指令

鉤子函數

一個指令定義物件可以提供以下幾個鉤子函數(皆為可選)：

bind：只呼叫一次，指令第一次綁定到元素時呼叫。在這裡可以進行一次性的初始化設定。

inserted：被綁定元素插入父節點時呼叫 (僅保證父節點存在，但不一定已插入文件中)。

update：所在元件的 VNode 更新時調用，但可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但你可以透過比較更新前後的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。

componentUpdated：指令所在元件的 VNode 及其子 VNode 全部更新後呼叫。

unbind：只呼叫一次，指令與元素解綁時呼叫。

鉤子函數的參數 (即 el、binding、vnode 和 oldVnode)。

要注意的是：update時dom可能還沒有插入文檔，componentUpdated是DOM已經插入文檔。而所謂的「更新」這個鉤子函數的觸發條件非常廣泛，不容易把控。例如，其他與該節點無關的相鄰節點更新，引發其佈局的重流，也會導致該鉤子函數觸發

因此，如果想要在資料更新後，操作DOM，使用指令的update , componentUpdated 需要謹慎，可以考慮使用nextTick

相關文章推薦: