vue指令與$nextTick操作DOM有什么區別

小編給大家分享一下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 更新完成后就會調用。例如：

<div id="example">{{message}}</div>
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

以上是“vue指令與$nextTick操作DOM有什么區別”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！